程式学徒

最新技术 未来网页

《JavaScript DOM编程艺术》13:CSS-DOM

2018-10-11 ZackJavaScript学徒

JavaScript DOM编程艺术

这是《JavaScript学徒》系列的第十三课,今天会介绍《JavaScript DOM编程艺术》第9章CSS-DOM,学习用JavaScript来操作CSS。

教学视频连结

结构—表示—行为

  • HTML:结构层(Structural layer)
  • CSS:表示层(Presentation layer)
  • JavaScript:行为层(Behavior layer)

style属性

<p id="example" style="color: grey; font-family: 'Arial', sans-serif;">An Example</p>
var para = document.getElementById("example");
alert(typeof para.style);

style属性是一个对象(object)。

para.style.color
para.style.fontFamily

所有带”-“号的属性改用驼峰命名,font-family变成fontFamily。

只能取得内嵌(inline)样式。

可直接修改:

para.style.color = "black";

className属性

覆盖class属性:

para.setAttribute("class", "intro");

para.className = "intro";

添加新class:

para.className += " intro";

注意”intro”前面有一个空格。也可自行写一个函数判断className是否存在,再决定是直接赋值还是添加。