10.4 JS CSS-DOM

优质

小牛编辑

129浏览

2023-12-01

JavaScript CSS-DOM是通过JavaScript去改变HTML-DOM的显示形式（即样式）。如element.style.fontSize = 15em; 与直接在CSS中定义规则相比，JS CSS-DOM可以动态或者定时改变样式，这是CSS所不能实现的。

DOM Core HTML-DOM CSS-DOM关系

DOM Core是DOM API提供的用于操作页面元素的基础方法、比如根据id、标签名获取元素标签等。

HTML-DOM同样是JavaScript用于操作HTML元素的方法，只是方式有所不同，如document.body;element.href = value;等。

CSS-DOM是JavaScript操作页面显示样式的方式、如document.style.fontSize= 11px等。

从上面看JavaScript似乎能胜任一个网页从构造到显示、以及动态改变网页结构样式的功能。但是这并不意味着所有的事情交由JS完成是一个好的选择。一般性的网站建设，我们通常还是会通过HTML来构造页面结构，然后通过CSS来设定样式，通过JS来改变行为，HTML/CSS/JS各司其职。当然对于一些以交互为主的网页应用（如游戏、工具）而言，使用纯JS来构建对于组件化有帮助，而且能减少服务请求，提高性能。

操作样式表

浏览器提供了一个接口来操作样式表：document.styleSheets，该接口将返回页面所使用的样式表列表，包括使用link元素引用的外部样式表。语法如下：

var sheet = document.createElement('style')
sheet.innerHTML = "div {border: 2px solid black; background-color: blue;}";
document.body.appendChild(sheet);

我们也可以动态的删除样式，可以用于需要清除样式的场合：

var sheetToBeRemoved = document.getElementById('styleSheetId');
var sheetParent = sheetToBeRemoved.parentNode;
sheetParent.removeChild(sheetToBeRemoved);

如果要添加样式规则，我们可以通过insertRule接口来实现，如下所示：

stylesheet.insertRule(".have-border { border: 1px solid black;}", 0);

改变元素样式

文档元素都包含一个style对象，要改变元素样式，我们首先得获取到元素，然后通过其style对象来改变样式，如下所示：

function setColor(id) {
  var el = document.getElementById(id);
  el.style.color = "red";
}

我们也可以通过setAttribute接口来批量设置样式规则，如下：

element.setAttribute('style', 'color: red');

但是需要注意的是，这将覆盖所有的样式。

对于使用中划线连接符（-）的样式，我们需要使用驼峰命名法（CamelCase），否则JS将无法识别，比如CSS中的font-size属性，在style对象中对应的要使用fontSize来操作，示例如下：

function changeElement(id) {
  var el = document.getElementById(id);
  el.style.color = "red";
  el.style.fontSize = "15px";
  el.style.backgroundColor = "#FFFFFF";
}

元素类名

另外一个常用的改变样式的方法是改变元素类名（class）属性，由于class是JS的保留关键字，所以我们得使用className来访问它。通过这个方法，可以使得JS和CSS分离性更好，示例如下：