萌新求问，如何访问样式表中的样式。 - javascript吧

level 5

敲键盘的猿楼主

小弟按照教材指导写访问样式表的东西，但是就是不能成功读出css样式表中的值，请各位路过的大神指教一二。
首先建立css样式表，内容如下：（小弟就是怀疑是样式表的格式不对造成无法读取，因为系统给出的错误就是无法读取undefind的cssRules）
@charset"utf-8";
body{color:black;}
p{color:gray;}
div{color:white;}
建立调取表格的html页面，内容如下：
<!doctype html>
<html>
<head>
<meta chatset="utf-8">
<style type="text/css">
#box{color:green;}
.red{color:red;}
.blue{color:blue;}
</style>
<link fref="style1.css"rel="stylesheet"type="text/css"media="all"/>
<script>
window.onload=function(){
var oCssRules=document.styleSheets[1].cssRules||document.styleSheets[1].rules;
var box=document.getElementById("box");
box.innerHTML="第二个样式表中的第一个样式的color属性值="+oCssRules[0].style.color;
}
</script>
</head>
<body>
<div id="box"></div>
</body>
</html>
按照上述编写的东西应该读出color的属性值是black，但是就是读不出来。始终给出的错误是：cannot read property 'cssRules' of undefind .
请过路的大神指导一二。

2020年04月23日 07点04分 1

level 2

写山画水

2020年04月23日 08点04分 2

敲键盘的猿

纠正手误之后还是不行啊大神 [泪]

2020年04月24日 01点04分

level 5

敲键盘的猿楼主

<!doctype html>
<html>
<head>
<style type="text/css">
#box{color:green;}
.red{color:red;}
.blue{color:blue;}
</style>
<link href="style1.css" rel="stylesheet" type="text/css" media="all">
<script>
window.onload=function(){
var cssRules=document.styleSheets[1].cssRules||document.styleSheets[1].rules;
var box=document.getElementById("box");
box.innerHTML="第二个样式表中第一个样式的color属性="+cssRules[0].style.color;
}
</script>
</head>
<body>
<div id="box"></div>
</body>
</html>

2020年04月24日 01点04分 3

敲键盘的猿

给出的错误原因是：Faild to read the 'cssRules' property form 'CSSStyleSheet':cannot access rules at window.onload.

2020年04月24日 01点04分

丶影-奈斯

@敲键盘的猿其他浏览器不清楚只测试了这两个浏览器

2020年04月24日 04点04分

level 2

写山画水

可以使用console.log()打印document.styleSheets，发现没有document.styleSheets[1].cssRules||document.styleSheets[1].rules，需要挂一个tomcat启动该页面才可以。

2020年04月24日 08点04分 5

敲键盘的猿

不明白~~~~

2020年04月24日 08点04分