10.4 JS CSS-DOM

学习使用DOM接口来操作CSS样式

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分离性更好,示例如下: