JavaScript动态添加CSS的class样式不生效问题最近在写代码的过程中，使用动态class样式，发现不生效，仔

最近在写代码的过程中，使用动态class样式，发现不生效，仔细检查了代码发现并没有什么逻辑问题

CSS加载优先级导致的问题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dynamic CSS Class Example</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="myElement">Hello World</div>
    <button id="changeStyleBtn">Change Style</button>

    <script src="script.js"></script>
</body>
</html>

/* 这段样式在文件加载时确定优先级 */
.newStyle {
    color: red;
    font-size: 30px;
}

.myElement {
    color: blue;
    font-size: 20px;
}

document.getElementById('changeStyleBtn').addEventListener('click', function() {
    var element = document.querySelector('.myElement');
    element.classList.add('newStyle');
});

解释：在这个案例中，有一个<div>元素，class为myElement，初始样式在styles.css中定义，颜色为蓝色，字体大小为30px。一个按钮点击事件，用于动态添加‘newStyle’类。这个类在‘styles.css’文件中定义，颜色为红色，字体大小为30px。

效果图如下：

点击Change Style发现并不会生效。

原因分析： CSS文件加载时，CSS样式的优先级已经确定。最后一个加载优先级最高。解决方法：把css样式调换一下即可，如下：

/* 这段样式在文件加载时确定优先级 */
.myElement {
    color: blue;
    font-size: 20px;
}

.newStyle {
    color: red;
    font-size: 30px;
}

再点击Change Style按钮发现，利用js动态添加的样式生效。

另外一种情况：

CSS选择器优先级导致的动态样式不生效的问题

原因是ID选择器的优先级大于类选择器。

/* 这段样式在文件加载时确定优先级 */
#myElement {
    color: blue;
    font-size: 20px;
}

.newStyle {
    color: red;
    font-size: 30px;
}

尽管样式newStyle是放在下面的，而后添加的，点击Change Style仍然不生效。

解决：
1.使用内联样式（提高优先级）

document.getElementById('myElement').style.color = 'red';
document.getElementById('myElement').style.fontSize = '30px';

2.使用JavaScript动态创建一个<style>元素，插入到文档的<head>部分。（提高优先级）

const style = document.createElement('style');
style.textContent = `
    #myElement {
        color: red;
        font-size: 30px;
    }
`;
document.head.appendChild(style);

3.使用!important提高优先级

/* 原始样式 */
#myElement {
    color: blue;
    font-size: 20px;
}

/* 使用 !important 提高优先级 */
.newStyle {
    color: red !important;
    font-size: 30px !important;
}

经测试，均能解决上述问题。