ppk谈JavaScript style属性

2024-05-06 14:17:01

字体：大中小

来源：转载

供稿：网友

事实上，7个范例脚本都用到了某种形式的CSS修改。比如，“表单验证”改变出错的表单域的样式，“XMLHTTP速度测试计”使用动画（其实也就是在很短的时间内多次改变某个样式）来让用户注意到速度的数据（而且，老实讲这算是有些花哨的效果）。“下拉菜单”通过改变样式来显示和隐藏菜单项。这些变化都拥有同样的目的：把用户的注意力吸引到这些元素上。

JavaScript有如下4种修改CSS的方式：

l 修改元素的style属性（element.style.margin='10%'）；

l 改变元素的class或id（element.className='error'），浏览器将自动应用那些定义在新的class或id上的样式；

l 向文档中写入新的CSS指令（document.write('<style>.accessibility{display: none}</style>'）；

l 改变整个页面的样式表。

大多数的CSS改变脚本，都采用修改style属性或改变class或id的方式。document.write方法只适合用于某些特定的场合以增强页面的可访问性。最后，我们很少会改变整个样式表，因为并非所有的浏览器都支持这样做，而且通常你也只是想改变某些特定元素的样式。

不管怎么说，我在范例脚本中使用了所有4种方法。我们将在本章中逐个研究这些方法及它们适用的场合。

A　style属性

最初也是最广为人知的修改CSS的方式就是通过所有HTML元素都拥有的style属性，并且访问它们的内联样式，style对象对每一个内联的CSS声明都包含一个对应的属性。如果你想设置一个元素的CSS属性margin，使用element.style.margin。如果你想要设置它的CSS属性color，就使用element.style.color。JavaScript属性总是拥有一个和CSS属性相似的名字。

内联样式

记住：HTML元素的style属性让我们得以访问该元素的内联样式。

让我们来回顾一些CSS的理论。CSS提供4种方式来给元素定义样式表。你可以使用内联样式，即直接把你的CSS写在HTML标签的style属性中。

<p style="margin: 10%">Text</p>

此外，你可以嵌入、链入或引入样式表。不管用何种方法，因为内联样式比其他任何形式的样式更为明确，内联样式能覆盖那些嵌入、链入或引入页面的样式表中定义的样式。因为style属性可以访问这些内联样式，所以它总是能覆盖其他的样式。这是这种方法的巨大优势。

然而，当你尝试读取样式时，可能遭遇问题。看这个例子：

<p id="test">Text</p>

p#test {

margin: 10%;

}

alert(document.getElementById('test').style.margin);

测试段落并没有包含任何内联样式，margin: 10%是被定义在一个嵌入的（或者链入，或者引入的）样式表中，而它是不可能从style属性中读出来的。弹出警告框显示为空。

在下一个例子中，弹出警告框将显示返回结果“10%”，因为margin现在被定义为内联样式：

上一篇：javascript得到XML某节点的子节点个数的脚本

下一篇：Javascript调试脚本的经验之谈第1/2页