<!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>
【推荐】还在用 ECharts 开发大屏？试试这款永久免费的开源 BI 工具！
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步