通过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节点时，样式优先级的问题的更多相关文章

  1. JS 操作Dom节点之样式

    为了提高用户体验,我们经常会动态修改Dom节点的样式,各种浏览器差异比较大,我们如何应对?不断尝试,不断总结~! 1. style.getComputedStyle.currentStyle 内嵌样式 ...

  2. JavaScript操作DOM节点

    DOM (文档对象模型(Document Object Model)) 文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标志语言的标准编程接口.在网 ...

  3. JavaScript HTML DOM 节点

    要向HTML DOM添加新元素,必须首先创建元素(元素节点),然后将其附加到现有元素. <!DOCTYPE html> <html> <meta charset=&quo ...

  4. 前端JavaScript之DOM节点操作

    1.HTML DOM是啥 Document Object Model:定义了访问和操作HTML文档的标准方法,把HTML文档呈现为带有元素,属性和文本的树状结构 2.解析过程 HTML加载完毕,渲染引 ...

  5. 使用JavaScript操作DOM节点元素的常用方法(创建/删除/替换/复制等)

    getElementById(id)这是通过id来访问某一元素,最常用的之一,例:<html><body><div id="myid">test ...

  6. javascript与DOM节点的结合使用

    文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标志语言的标准编程接口.在网页上,组织页面(或文档)的对象被组织在一个树形结构中,用来表示文档中对象 ...

  7. 【Javascript】 DOM节点

    HTML文档中一切都是节点! 整个文档是文档节点: 注释是注释节点: 每一个HTML元素都是一个元素节点: 元素内的文本内容是文本节点: 连元素的每一个属性都是一个属性节点. 看到这些是不是感觉很熟悉 ...

  8. JavaScript中DOM节点层次Text类型

    文本节点 标签之间只要有一点内容都会有文本节点,包括空格 创建文本节点document.createTextNode() 可以使用 document.createTextNode 创建新文本节点 == ...

  9. javascript 插入DOM节点

    1.使用appendChild,把一个子节点添加到父节点的最后一个子节点,.innerText插入的是内容 HTML <!-- HTML结构 --> <p id="js&q ...

随机推荐

  1. vscode中配置php的xdebug

    vscode中配置php的xdebug vscode配置php的xdebug,步骤如下: 1. 安装phpdebug插件: PHP Debug 2.网上下载php的xdebug扩展(注意根据自己的ph ...

  2. CentOS 7.0下安装Python3.6

    CentOS 7.0自带Python2.7 安装Python3.6步骤 1.安装依赖 yum install -y zlib-devel bzip2-devel openssl-devel ncurs ...

  3. C++借助curses库实现俄罗斯方块

    主要要实现如下几个功能:方块的移动控制.方块变形.判定方块是否接触边界和进行方块堆积.对方块进行消除. 1.方块的移动控制上下左右四个方向上-->变形,下-->加速下落,左-->向左 ...

  4. JavaScript中的Generator函数

    1. 简介 Generator函数时ES6提供的一种异步编程解决方案.Generator语法行为和普通函数完全不同,我们可以把Generator理解为一个包含了多个内部状态的状态机. 执行Genera ...

  5. Linux 简介(day1)

    一.Linux 诞生于1991年 二.创始人:林纳斯.托瓦茨(Linus Torvalds) 三.logo:企鹅 四.Linux完整系统包括 1.Linux kernel (Linux 内核) 2.f ...

  6. 前端性能优化成神之路-HTTP压缩开启gzip

    什么是HTTP压缩 HTTP压缩是指: Web服务器和浏览器之间压缩传输的”文本内容“的方法. HTTP采用通用的压缩算法,比如gzip来压缩HTML,Javascript, CSS文件. 能大大减少 ...

  7. 弱省胡策 Magic

    弱省胡策 Magic 求\(n\)个点\(n\)的条边的简单联通图的个数. 毒瘤,还要写高精. 我们枚举环的大小\(k\),\(\displaystyle ans=\sum_{k=3}^nC_n^k ...

  8. C#进阶のMEF注入

    1.什么是MEF 先来看msdn上面的解释:MEF(Managed Extensibility Framework)是一个用于创建可扩展的轻型应用程序的库. 应用程序开发人员可利用该库发现并使用扩展, ...

  9. python六十五课——单元测试(一)

    对函数(模块中的)进行函数测试定义两个需要被测试的函数: #求和函数 def mySum(x,y): return x+y #相减函数 def mySub(x,y): return x-y print ...

  10. skip-thought vector 实现Sentence2vector

    1.常见文本相似度计算方法 常见的短文本相似度计算方法目前有很多中,但这些短文本相似度计算方法都只是提取了短文本中的浅层特征,而无法提取短文本中的深层特征.目前常见的文本相似度计算方法有: 1)简单共 ...