JavaScript修改DOM节点时，样式优先级的问题
通过element.style.xxx设置或者读取的xxx样式属性，都是属于行间样式（<p style="color=red"></p>)，并不是 使用link的外部css文件 或者 在<style></style>标签中定义的样式
样式优先级： * < 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'。
JavaScript修改DOM节点时，样式优先级的问题的更多相关文章
- JS 操作Dom节点之样式
为了提高用户体验,我们经常会动态修改Dom节点的样式,各种浏览器差异比较大,我们如何应对?不断尝试,不断总结~! 1. style.getComputedStyle.currentStyle 内嵌样式 ...
- JavaScript操作DOM节点
DOM (文档对象模型(Document Object Model)) 文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标志语言的标准编程接口.在网 ...
- JavaScript HTML DOM 节点
要向HTML DOM添加新元素,必须首先创建元素(元素节点),然后将其附加到现有元素. <!DOCTYPE html> <html> <meta charset=&quo ...
- 前端JavaScript之DOM节点操作
1.HTML DOM是啥 Document Object Model:定义了访问和操作HTML文档的标准方法,把HTML文档呈现为带有元素,属性和文本的树状结构 2.解析过程 HTML加载完毕,渲染引 ...
- 使用JavaScript操作DOM节点元素的常用方法(创建/删除/替换/复制等)
getElementById(id)这是通过id来访问某一元素,最常用的之一,例:<html><body><div id="myid">test ...
- javascript与DOM节点的结合使用
文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标志语言的标准编程接口.在网页上,组织页面(或文档)的对象被组织在一个树形结构中,用来表示文档中对象 ...
- 【Javascript】 DOM节点
HTML文档中一切都是节点! 整个文档是文档节点: 注释是注释节点: 每一个HTML元素都是一个元素节点: 元素内的文本内容是文本节点: 连元素的每一个属性都是一个属性节点. 看到这些是不是感觉很熟悉 ...
- JavaScript中DOM节点层次Text类型
文本节点 标签之间只要有一点内容都会有文本节点,包括空格 创建文本节点document.createTextNode() 可以使用 document.createTextNode 创建新文本节点 == ...
- javascript 插入DOM节点
1.使用appendChild,把一个子节点添加到父节点的最后一个子节点,.innerText插入的是内容 HTML <!-- HTML结构 --> <p id="js&q ...
随机推荐
- 《Java大学教程》—第17章 Java聚焦类框架
由所有聚焦类构成,在java.util包中,包含三个重要接口:* List列表:元素为单个对象,元素在列表中是有序.可重复* Set集合:元素为单个对象,元素在集合中无序.不可重复* ...
- vue 数据绑定实现的核心 Object.defineProperty()
vue深入响应式原理 现在是时候深入一下了!Vue 最独特的特性之一,是其非侵入性的响应式系统.数据模型仅仅是普通的 JavaScript 对象.而当你修改它们时,视图会进行更新.这使得状态管理非常简 ...
- Oracle会话超时退出设置
前一段时间客户打电话说自从数据库搬迁后连接数据库总是提示会话不可用,和客户沟通才知到他们连接数据库的程序是从早上连上数据库后就一直保持连接状态,一天中需要执行几次操作,由于数据库中的会话连接有超时限制 ...
- flashfxp软件设置并关联默认编辑器
flashfxp是一款优秀的ftp应用软件,作为程序员,有时候一点小的改动,在线编辑是很方便的选择,但是flashfxp自带的编辑器像记事本一样,非常不好用.那么怎么设置关联到本地的编辑器,比如设置成 ...
- oradebug 10046
一.对当前的session使用oradebug命令: SQL> conn / as sysdba Connected. SQL> oradebug setmypid Statement p ...
- 5239-回忆京都-洛谷3月赛gg祭
传送门 题目背景 第十五届东方人气投票 音乐部门 106名 第四次国内不知道东方的人对东方原曲的投票调查 51名 回忆京都副歌我tm吹爆,东方文花帖我tm吹爆! 题目描述 射命丸文在取材中发现了一个好 ...
- AI VGG16
VGG(Visual Geometry Group) 16 参考链接: https://arxiv.org/abs/1409.1556
- AI 积分图
积分图(Integral Image),可以用于快速计算矩形特征.积分图每个位置(x, y)的值,等于原图对应位置的左上角所有像素点的值之和.因为“积分”在离散情况下就是求和,所以这也是积分图的命名由 ...
- docker容器中安装vi命令
在使用docker容器时,有时候里边没有安装vim,敲vim命令时提示说:vim: command not found,这个时候就需要安装vim,可是当你敲apt-get install vim命令时 ...
- net spider（python 网络爬虫）
# -*- coding: utf-8 -*- import urllib2,cookielib from bs4 import BeautifulSoup url="http://www. ...