JS document.stylesheets[0].rules返回空
为什么不生效：
html部分：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link href="CSSevent.css" rel="stylesheet" type="text/css">
<script>
function changeColor(val){
//表示获取第n+1（n>=0)个引入的外部CSS文件
var outterCSSfile=document.styleSheets[0].rules;
// alert(outterCSSfile);
//表示获取该CSS文件的第n+1(n>=0)个选择器
var styleOption=outterCSSfile[0];
if(val.value=="红色"){
styleOption.style.backgroundColor="red";
}
else if(val.value=="黑色"){
styleOption.style.backgroundColor="black";
}
}
</script>
</head>
<body>
<div class="colorBlock"></div>
<input type="button" value="红色" onclick="changeColor(this)">
<input type="button" value="黑色" onclick="changeColor(this)">
</body>
</html>
css部分：
.colorBlock{
width: 200px;
height:200px;
background-color: black;
}
浏览器报错：
那应该怎么办呢？
恩言1回答
-
我喺黄铭_M君
document.styleSheets在chrome下没法获取外部文件的样式..ie和ff则需要做兼容处理..你的styleOption的值是null所以报错..建议不要用这种方法修改样式..提供两种思路..直接在内联样式修改建两个不同的class背景分别为black和red,点击按钮修改类名
随时随地看视频慕课网APP
相关分类
JavaScript