CSS JavaScript – 修改HTML标签上的CSS

在本文中，我们将介绍如何使用JavaScript来修改HTML标签上的CSS。

阅读更多：CSS 教程

1. 使用JavaScript修改CSS属性

在JavaScript中，我们可以使用style属性来修改HTML标签上的CSS属性。以下是一个示例：

<!DOCTYPE html>
<html>
<head>
<script>
function changeColor() {
  var element = document.getElementById("myDiv");
  element.style.color = "red";
}
</script>
</head>
<body>
<button onclick="changeColor()">点击修改颜色</button>
<div id="myDiv">这是一个示例文字。</div>
</body>
</html>

在上面的示例中，我们定义了一个名为changeColor的JavaScript函数。当按钮被点击时，会调用这个函数。函数内部，我们使用getElementById方法来获取具有特定id的元素，并使用style属性来修改其颜色。

2. 使用JavaScript添加CSS样式类

除了修改CSS属性，我们还可以使用JavaScript添加或删除CSS样式类。以下是一个示例：

<!DOCTYPE html>
<html>
<head>
<style>
.myClass {
  color: blue;
  font-size: 20px;
}
</style>
<script>
function addClass() {
  var element = document.getElementById("myDiv");
  element.classList.add("myClass");
}

function removeClass() {
  var element = document.getElementById("myDiv");
  element.classList.remove("myClass");
}
</script>
</head>
<body>
<button onclick="addClass()">添加样式类</button>
<button onclick="removeClass()">删除样式类</button>
<div id="myDiv">这是一个示例文字。</div>
</body>
</html>

在上面的示例中，我们首先在<style>标签内定义了一个名为myClass的CSS样式类，包含蓝色的文字和字体大小为20像素。在JavaScript函数中，我们分别使用classList.add和classList.remove方法来添加和删除CSS样式类。

3. 使用JavaScript修改CSS样式表

除了针对具体的HTML元素进行修改，我们还可以使用JavaScript直接修改整个CSS样式表。以下是一个示例：

<!DOCTYPE html>
<html>
<head>
<style>
#myDiv {
  color: blue;
  font-size: 20px;
}
</style>
<script>
function changeStyle() {
  var sheet = document.styleSheets[0];
  var rules = sheet.cssRules || sheet.rules;
  var rule = rules[0].style;
  rule.color = "red";
  rule.fontSize = "30px";
}
</script>
</head>
<body>
<button onclick="changeStyle()">点击修改样式</button>
<div id="myDiv">这是一个示例文字。</div>
</body>
</html>

在上面的示例中，我们使用styleSheets属性来获取样式表对象，并使用cssRules或rules属性来获取样式表的规则对象。通过修改规则对象的style属性，我们可以直接修改整个CSS样式表。