脚本化内联样式
脚本化 CSS 最直接了当的方法就是修改单独的文档元素的 style
属性,前面提到过,style
属性值不是字符串,而是 CSSStyleDeclaration
对象,我们可以这样对元素 e
的 style
属性进行设置:
e.style.fontSize = "24pt";
e.style.fontWeight = "bold";
e.style.color = "blue";
通过上述代码,可以看到 CSSStyleDeclaration
对象的属性名和 CSS 属性名有所区别,如果 CSS 属性名包含连字符时,对应的 CSSStyleDeclaration
对象的属性名应该是移除连字符,然后将每个连字符后的字母大写。此外,如果 CSS 属性名在 JavaScript 中是保留字,对应 CSSStyleDeclaration
对象的属性名前要加上「css」前缀。
另外,使用 CSSStyleDeclaration
对象的 style
属性时,所有的属性值都是字符串,而且。所有的定位属性都要包含单位。
有时,通过单个字符串值来设置或查询元素的内联样式反而比通过 CSSStyleDeclaration
对象简单:
e.setAttribute("style", s);
e.style.cssText = s;
s = e.getAttribute("style");
s = e.style.cssText;
元素的内联样式只在设置样式的时候有用,如果要查询元素的样式,就要用到计算样式。
No Comments