为什么不生效：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君
TA贡献6条经验 获得超2个赞
document.styleSheets在chrome下没法获取外部文件的样式..ie和ff则需要做兼容处理..
你的styleOption的值是null所以报错..
建议不要用这种方法修改样式..提供两种思路..
直接在内联样式修改
建两个不同的class背景分别为black和red,点击按钮修改类名
添加回答
举报
0/150
提交
取消