js 操作css实现代码

JavaScript 可以通过操作 DOM 来动态地修改页面的内容和样式。其中，修改页面样式主要就是操作 CSS。本文将详细讲解如何使用 JavaScript 操作 CSS 实现代码的完整攻略。

在 JavaScript 中操作 CSS 的基本方法

在 JavaScript 中操作 CSS 样式，通常使用 DOM 的 style 属性。这个属性是一个对象，可以通过 JavaScript 修改其属性值，从而实现对应的样式变化。

具体来说，可以通过以下代码获取 DOM 元素的 style 对象：

var element = document.getElementById('myElement');
var style = element.style;

然后，可以对该 style 对象的属性进行修改：

style.color = 'red'; // 修改文本颜色
style.fontSize = '16px'; // 修改字体大小

需要注意的是，这种方法只能修改内联样式（即写在元素的 style 属性中的样式），而无法修改外部样式表中定义的样式。

在 JavaScript 中修改外部样式表

如果需要修改外部样式表中的样式，就需要使用一些比较复杂的方法了。下面介绍两种常用的方法：

方法一：使用 document.styleSheets 属性

document.styleSheets 属性可以获取文档中所有的样式表。从中找到需要修改的样式表，然后修改其中的样式规则即可。

var styleSheets = document.styleSheets;
for (var i = 0; i < styleSheets.length; i++) {
  var rules = styleSheets[i].cssRules || styleSheets[i].rules;
  for (var j = 0; j < rules.length; j++) {
    var rule = rules[j];
    if (rule.selectorText === '.myClass') { // 根据选择器找到需要修改的样式规则
      rule.style.color = 'red'; // 修改样式
    }
  }
}

需要注意的是，这种方法存在一些兼容性问题，IE 浏览器使用的是 rules 属性，而其他浏览器使用的是 cssRules 属性。

方法二：使用 insertRule() 方法

另一种方式是使用 insertRule() 方法，该方法可以在样式表中动态插入一条样式规则。利用这个特性，可以通过 JavaScript 动态修改样式。

var styleSheets = document.styleSheets;
for (var i = 0; i < styleSheets.length; i++) {
  var sheet = styleSheets[i];
  if (sheet.ownerNode.getAttribute('href') === 'path/to/myStyles.css') { // 找到需要修改的样式表
    sheet.insertRule('.myClass { color: red; }', sheet.cssRules.length); // 插入一条样式规则
  }
}

这种方法比较简单，但需要注意的是，如果样式表中已经存在对应的选择器，则会被覆盖掉。

示例说明

下面举两个例子说明如何使用 JavaScript 操作 CSS 实现代码：

示例一：点击按钮改变文本颜色

HTML 代码：

<button id="colorBtn">点击修改文本颜色</button>
<p id="myText">Hello, World!</p>

JavaScript 代码：

var colorBtn = document.getElementById('colorBtn');
var myText = document.getElementById('myText');
colorBtn.addEventListener('click', function() {
  myText.style.color = 'red';
});

该示例中，点击按钮后修改了文本的颜色。

示例二：动态修改样式表

HTML 代码：

<link rel="stylesheet" href="path/to/myStyles.css">
<p class="myClass">Hello, World!</p>

CSS 代码（myStyles.css）：

.myClass {
  color: blue;
  font-size: 16px;
}

JavaScript 代码：

var styleSheets = document.styleSheets;
for (var i = 0; i < styleSheets.length; i++) {
  var rules = styleSheets[i].cssRules || styleSheets[i].rules;
  for (var j = 0; j < rules.length; j++) {
    var rule = rules[j];
    if (rule.selectorText === '.myClass') { // 根据选择器找到需要修改的样式规则
      rule.style.color = 'red'; // 修改样式
    }
  }
}

该示例中，通过 JavaScript 修改了 myStyles.css 中 .myClass 选择器下的文本颜色。