www.zhblog.net

访问样式信息


在 HTML 标签上,可以设定style属性,借以改变元素的样式。例如:

<div style="color: #ffffff; background-color: #ff0000; width: 500px; height: 200px; padding-left: 250px; padding-top: 150px;">这是一段消息</div>

可以直接使用 JavaScript 设定style特性上的各个特性来达到相同效果。例如:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
</head>
<body>
    <div id="message">这是一段消息</div>

<script type="text/javascript">
    let message = document.getElementById('message');
    message.style.color = '#ffffff';
    message.style.backgroundColor = '#ff0000';
    message.style.width = '500px';
    message.style.height = '200px';
    message.style.paddingLeft = '250px';
    message.style.paddingTop = '150px';
</script>  

</body>
</html>

按此观看执行结果

style特性参考的是CSSProperties对象,要注意的是特性名称的大小写,通常是没有破折线、采驼峰式命名。一般不会或不建议使用标签的style属性来设定样式,而会定义在样式表中。例如:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <style type="text/css">
        #message {
            color: #ffffff; 
            background-color: #ff0000; 
            width: 500px; 
            height: 200px; 
            padding-left: 250px; 
            padding-top: 150px;
        }
    </style>
</head>
<body>

    <div id="message">这是一段消息</div>

</body>
</html>

按此观看执行结果

然而在这种情况下,无法使用style特性来获取样式表中定义的各个样式信息,因为元素的style特性是对应于标签的style属性,标签若没有定义style属性,或程序中没有设定style的特性,就无法使用style特性来获取样式信息。

标签的style属性或透过元素的style特性会覆盖样式表的设定,由于一般并不建议直接于标签上设定style属性,因此透过程序时,通常建议将style特性用于设定样式,而不是获取样式。

如果标签没有设定style属性,而想要获取元素上套用的样式信息,则必须获取元素的计算样式(Computed style),计算样式是指所有样式规则(包括样式表、style属性)已套用至元素后的样式结果。

若是在标准浏览器中,可以使用windowgetComputedStyle函数(与document.defaultView.getComputedStyle是相同函数),获取的样式对象是只读的CSS2Properties对象,可以直接如同使用style特性,直接于上指定特性来获取样式信息,或是使用getPropertyValue()方法指定 CSS 属性。

getComputedStyle的第二个实参可指定虚拟类(pseudo-class),如果不设定的话,也必须指定null,例如:

window.getComputedStyle(elem, null)[prop];

来使用程序获取上一个范例网页的 CSS 样式设定:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <style type="text/css">
        #message {
            color: #ffffff; 
            background-color: #ff0000; 
            width: 500px; 
            height: 200px; 
            padding-left: 250px; 
            padding-top: 150px;
        }
    </style>
</head>
<body>

    <div id="message">这是一段消息</div>
    <span id="console"></span>

<script type="text/javascript">
    function style(elem, prop) {
        return window.getComputedStyle(elem, null)[prop];
    }

    let message = document.getElementById('message');
    let color = style(message, 'backgroundColor');
    document.getElementById('console').innerHTML = color;
</script>  
</body>
</html>

按此观看执行结果


展开阅读全文

评论

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 心情