样式声明对象：document.styleSheets[0].rules[4].style;

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>设定基础连接颜色</title>
    <style>
        a:link{color: blue;}
        a:visited{color: red;}
        a:hover{color: yellow;}
        a:active{color:green;}

        /* a:link {color: #FF0000;}     未访问的链接
        a:visited {color: #00FF00;}  已访问的链接
        a:hover {color: #FF00FF;}    鼠标移动到链接上
        a:active {color: #0000FF}   选定的链接 */

        body{
            /*width: 100%;*/
            /*height: 800px;*/
            background: #f0f;
            color:red;
            font-size: 30px;
        }
    </style>
    <style>
        #one{
            font-size: 80px;
            color: yellow;
            background: #aaa;
        }
    </style>
</head>
<body id="ddd" background="../img/配图.png">
    <a href="https://www.baidu.com">sdf</a>
    <a href="https://www.baidu.com">fsdfsd</a>
    <a href="https://www.baidu.com">zsdfxzvxz</a>
    <a href="https://class.imooc.com/?mc_marking=4e0b0537f151197140fed11920097988&mc_channel=bdqdrmjt">dfddddf</a>
    <a href="https://i-beta.cnblogs.com/posts/edit-done;postId=12068740">sdfsdaf</a>


    <p id="one">这里的样式放在第二个style标签中，即第二个样式声明对象</p>
    <script>
        // document.styleSheets[n];    表示第n个样式声明对象，即表示第n个style标签
        // document.styleSheets[n].rules[h];   表示第n个样式声明对象，rules[h]表示第(h+1)个自定义规则
        // var dd=document.styleSheets[0].rules[4].style;   表示第一个style标签里面的的第5个自定义样式
        // document.styleSheets[0].rules[4].style.xx;  表示第一个style标签里面的的第5个自定义样式中的xx属性值。


        //document.styleSheets[0]第一个样式声明对象，即表示第二个style标签
        var dd=document.styleSheets[0].rules[4].style;
        console.log(dd.color);

        //document.styleSheets[1]第二个样式声明对象,即表示第二个style标签
        var two = document.styleSheets[1].rules[0].style;
        console.log(two['font-size']);


        // 内联标签中定义样式 <xx id="one" background="../img/bg.png" style="color;red;background:blue;font-size:30px;"></xx>
        // 内联样式可以直接使用：  document.getElementId('one').background;
        // var one = document.getElementById('one');
        // console.log(one.background);//这里是获取xx中的直接属性background，而不是style中定义的background。谨记！
    </script>
</body>
</html>
posted @ 2019-12-19 19:25  最好的安排  阅读(556)  评论(0)    收藏  举报

Knowledge is infinite