【DOM编程艺术】style属性

矫情吗；* 2022-01-06 06:23 231阅读 0赞

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>Example</title>
    </head>
    
    <body>
    <p id='example' style="color:grey; font-family:Arial, Helvetica, sans-serif">
    An example of a paragraph
    </p>
    <script>
    window.onload=function(){
        var para=document.getElementById('example');
        alert(typeof para.nodeName); //string
        alert(typeof para.style);    //object
    }
    </script>
    </body>
    </html>

事实证明：element.style将返回一个对象，样式都存放在这个style对象的属性里。

不仅文档里的每个元素都是一个对象，每个元素都有一个style属性，他们也是一个对象。

解析：Javascript将把减号前面的内容解释为"元素的style属性的font属性"，把减号后面的内容解释为一个名为family的变量，把整个表达式解释为一个减法运算。

补充：减号和加号之类的操作符是保留字符，不允许用在函数或变量的名字里。这同时意味着它们也不能用在方法或属性的名字里

规定：当你需要引用一个中间带减号的CSS属性时，DOM要求你用驼峰命名法。css属性里的font-family变为DOM属性的fontFamily：element.style.fontFamily

不管css样式属性的名字里有多少个连字符，DOM一律采用驼峰命名法来表示它们。

通过style属性只能返回内嵌样式。换句话说，只有把CSS style属性插入到标记里，才可以用DOM style属性去查询那些信息：

style对象的各个属性都是可读写的。不仅可以获取样式，还可以更新样式。element.style.property=value //更新样式 value必须是字符串，加引号

转载于:https://www.cnblogs.com/positive/p/3677382.html