<!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{ /* 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>