js 添加css样式

基础概念

JavaScript（JS）是一种脚本语言，常用于网页开发，可以动态地修改网页内容和行为。CSS（Cascading Style Sheets）是一种样式表语言，用于描述HTML或XML（包括SVG、XHTML等）文档的外观和格式。

类型

内联样式：直接在HTML元素上使用style属性。
内部样式表：在HTML文档的<head>部分使用<style>标签。
外部样式表：通过<link>标签引入外部CSS文件。

应用场景

响应式设计：根据不同的屏幕尺寸或设备类型，动态调整页面布局和样式。
交互效果：用户点击按钮或进行其他操作时，改变元素的样式。
主题切换：允许用户切换不同的主题样式。

示例代码

以下是一个通过JavaScript动态添加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 with JS</title>
</head>
<body>
    <button id="changeColorBtn">Change Color</button>
    <div id="targetDiv">This is a target div.</div>

    <script>
        document.getElementById('changeColorBtn').addEventListener('click', function() {
            var targetDiv = document.getElementById('targetDiv');
            targetDiv.style.backgroundColor = 'blue';
        });
    </script>
</body>
</html>

在这个示例中，当用户点击按钮时，targetDiv的背景颜色会变为蓝色。

参考链接

MDN Web Docs: Using JavaScript to manipulate CSS

遇到的问题及解决方法

问题：为什么样式没有生效？

原因：

选择器错误：选择器没有正确选中目标元素。
样式属性错误：设置的样式属性名称或值不正确。
脚本执行顺序：脚本在DOM元素加载完成之前执行。

解决方法：

检查选择器是否正确，确保能选中目标元素。
确认样式属性名称和值的正确性，参考MDN Web Docs。
将脚本放在<body>标签的底部，或使用DOMContentLoaded事件确保DOM加载完成后再执行脚本。

document.addEventListener('DOMContentLoaded', function() {
    document.getElementById('changeColorBtn').addEventListener('click', function() {
        var targetDiv = document.getElementById('targetDiv');
        targetDiv.style.backgroundColor = 'blue';
    });
});

通过以上方法，可以有效解决通过JavaScript添加CSS样式时遇到的问题。