JavaScript修改DOM节点时,样式优先级的问题
2018-03-03 18:15
369 查看
通过element.style.xxx设置或者读取的xxx样式属性,都是属于行间样式(<p style="color=red"></p>),并不是 使用link的外部css文件 或者 在<style></style>标签中定义的样式
样式优先级: * < tagName < class < id < 行间(行间样式就是写在标签内)
下面这个代码中
观察div的状态变化:
初始状态为 <div id="div1"></div> 此时div内部为白色;
先点击变红之后,变为 <div id="div1" class="red"></div> 此时div内部为红色;
再点击变黄 ,变为 <div id="div1" class="red" style="background-color: yellow;"></div>,此时div内部颜色变为黄色,此时黄色为行间样式,会覆盖掉通过class或者id设置的同一个属性(background-color)样式。
刷新浏览器,改变顺序:
初始状态为 <div id="div1"></div> 此时div内部为白色;
先点击变黄 ,变为 <div id="div1" style="background-color: yellow;"></div>,此时div内部颜色变为黄色,此时黄色为行间样式
再点击变黄之后,变为 <div id="div1" style="background-color: yellow;" class="red"></div> 此时div内部为仍为黄色,这是因为后添加的class属性优先级没有上一步添加的行间属性的优先级高,所以不起作用。
建议:
如果出现这种情况,非常头疼,因为不报错,所以很难查找
所以,尽量对同一个元素,更改样式属性的时候,只是用一种方法,要么只使用element.style.xxx,要么只是用element.className='xxx'。
样式优先级: * < tagName < class < id < 行间(行间样式就是写在标签内)
下面这个代码中
<html> <head> <style> #div1{ width:100px; height:100px; border:1px solid blue;} .red{ background-color: red } </style> </head> <body> <div id="div1"></div> <button onclick="changeToRed()">变红</button> <button onclick="changeToYellow()">变黄</button> </body> <script> function changeToRed(){ var div1 = document.getElementById("div1"); div1.className = "red"; } function changeToYellow(){ var div1 = document.getElementById("div1"); div1.style.backgroundColor = "yellow"; } </script> </html>
观察div的状态变化:
初始状态为 <div id="div1"></div> 此时div内部为白色;
先点击变红之后,变为 <div id="div1" class="red"></div> 此时div内部为红色;
再点击变黄 ,变为 <div id="div1" class="red" style="background-color: yellow;"></div>,此时div内部颜色变为黄色,此时黄色为行间样式,会覆盖掉通过class或者id设置的同一个属性(background-color)样式。
刷新浏览器,改变顺序:
初始状态为 <div id="div1"></div> 此时div内部为白色;
先点击变黄 ,变为 <div id="div1" style="background-color: yellow;"></div>,此时div内部颜色变为黄色,此时黄色为行间样式
再点击变黄之后,变为 <div id="div1" style="background-color: yellow;" class="red"></div> 此时div内部为仍为黄色,这是因为后添加的class属性优先级没有上一步添加的行间属性的优先级高,所以不起作用。
建议:
如果出现这种情况,非常头疼,因为不报错,所以很难查找
所以,尽量对同一个元素,更改样式属性的时候,只是用一种方法,要么只使用element.style.xxx,要么只是用element.className='xxx'。
相关文章推荐
- jquery easyui 目录树问题:1、找DOM节点 2、修改文本节点的css样式。
- JavaScript中操作有些DOM时关于文本节点和元素节点的问题。
- javascript下有关dom以及xml节点访问兼容问题
- JavaScript之jQuery-3 jQuery操作DOM(查询、样式操作、遍历节点、创建插入删除、替换、复制)
- javascript下有关dom以及xml节点访问兼容问题
- javascript之解决dom中存在的空白节点问题
- JavaScript基础之DOM修改样式
- JavaScript中对DOM节点的访问、创建、修改、删除
- JavaScript之DOM-2 读取和修改节点信息(节点信息、元素的内容、属性)
- JavaScript中对DOM节点的访问、创建、修改、删除
- javascript之解决DOM中存在的空白节点问题
- JavaScript的DOM编程--02--获取元素节点
- JavaScript DOM中获取元素节点的父节点和父节点名
- javascript中dom节点操作(创建节点、增加节点、删除节点、克隆节点)
- javascript对于dom的操作--得到兄弟节点 && getElementsByTagName使用方法
- 9.20:javascript执行顺序和改变DOM节点的CSS class属性
- JavaScript 节点操作Dom属性和方法(转)
- JavaScript CSS修改学习第二章 样式
- javascript dom 获取样式属性值
- JavaScript---BOM模型之window对象,DOM模型的节点获取