你真的知道css三种存在样式（外联样式、内部样式、内联样式）的区别吗？

　　css样式在html中有三种存在形态：

　　内联样式：<div style="display: none"></div>

　　内部样式: <style></style>

　　外联样式：<link href="" />

　　三者的优先级为：内联样式>内部样式>外联样式。

　　你可能会对内部样式和外联样式的优先级产生怀疑。反正我怀疑过，是不是两者的先后顺序不同会产生覆盖？当然经过测试，完全没有这种情况。~至于原理，我觉得是和渲染机制有关。

　　分割线~其实以上都是基础知识，下面才是要讲的重点。

　　我们知道，在js中修改节点的长、宽、背景色等等样式属性是很常见的操作。比如

var targetObj = document.getElementById("test");
targetObj.style.width = "100px";

　　如果targetObj本身就已经设定了宽度。在js中通过target.style.width去读取那个既定宽度时，会出现：当宽度是在内联中定义可以读取到，如果宽度不是在内联中定义，targetObj.style.width返回的就是一个空串。

　　总结：

　　targetObj.style.width去获取的应该是在内联中定义的宽度，如果宽度定义在非内联中，永远不会获取到值，尽管你看到元素在浏览器中呈现得有长有高的；

　　通过js代码动态添加targetObj.style.width的优先级是最高的，但是你可以理解为它是添加到内联样式中，而事实也确实是如此。其实对于这句话其实还可以再补充一点点。对于targetObj.className = "newStyle"，设置类设置新样式的手段，请务必保证添加的类的样式有足够高的优先级，否则将看不到任何效果。你可以在.newStyle的样式属性定义中增加!important，提高优先级，但是这样在ie6中不奏效，反而需要用带下划线的属性另外定义（hack技术）。我采用的方法基本是通过给.newStyle增加id标签来提高其优先级。比如(#name li.newStyle和.newStyle相比，优先级不知高了几个档次)，而且所有浏览器都支持。

　　探索到这里，还可以继续探索下去，对于样式操作，有没有更有效的方式？cssText，提供了批量处理功能，

　　详见另一篇博文：http://www.cnblogs.com/Iwillknow/p/3691490.html

转载于:https://www.cnblogs.com/Iwillknow/p/3691492.html

你真的知道css三种存在样式（外联样式、内部样式、内联样式）的区别吗？相关推荐

web前端学习day_02:CSS:三种使用方式/选择器/颜色/背景图片/查看样式/文本/元素显示方式/盒子模型/定位方式/行内对齐/显示层级/防溢出
CSS : Cascading Style Sheet 层叠样式表. 作用: 美化页面 CSS 如何在html页面中添加css样式代码?总共有三种方式: 1.选择器 2.选择器练习: 3.颜色赋值 4 ...
CSS样式创建（外部样式内部样式内联样式）
内部演示语法: <head><style> /*CSS语句*/</style> </head> 注:使用style标记创建样式时,最好把标记写在< ...
react里面内联css样式怎么样_React.js内联样式最佳做法
小编典典目前还没有很多"最佳实践".我们中那些使用内联样式作为React组件的人仍在进行大量试验. 全部还是全部? 我们所称的"样式"实际上包括许多概念: 布 ...
html内敛样式background,js获取内联样式的方法
javascript 获取内联样式 #box{ width:100px; height:100px; background-image:url(1.jpg); background-size:140% ...
CSS复习--CSS三种样式设置方法
目录前言 CSS CSS样式 1.内联样式(行内样式) 2.内部样式表 3.外部样式表前言网页分成三个部分: 结构(HTML) 表现(CSS) 行为(JavaScript) CSS CSS (层 ...
css实例 css中id/class 详解样式表（外部样式表内部样式表内联样式 7种基础选择器多重样式优先级错误理解）[第一天]
文章目录 css实例 css中的id css中的class 样式表外部样式表内部样式表内联样式 7种基础选择器多重样式优先级错误理解 css实例 CSS 规则由两个主要的部分构成:选择器,以 ...
CSS学习笔记-【内联样式、内部样式、外部样式表】 AND 2018-11-21（21:18）
一.内联样式 1.在DIV标签中添加内联样式. 添加style属性 . 在style中属性和值得表示方法为: style="属性:值;属性:值"; 例如: <div styl ...
css vue 内联_vue 内联样式style中的background
在我们使用vue开发的时候有很多时候我们需要用到背景图这个时候会直接使用内联样式直接把你拿到的数据拼接上去注意在vue中直接使用style时花括号一定别忘记还有就是你的url一定 ...
【CSS】CSS 层叠样式表 ① ( 简介 | CSS 引入方式 - 内联样式 | 内联样式语法 | 内联样式缺点 )
文章目录一.CSS 层叠样式表二.CSS 引入方式 - 内联样式 1.内联样式语法 2.内联样式缺点 3.内联样式代码示例 ① 核心代码示例 ② 完整代码示例 ③ 执行结果一.CSS 层叠样式表 ...

你真的知道css三种存在样式（外联样式、内部样式、内联样式）的区别吗？

你真的知道css三种存在样式（外联样式、内部样式、内联样式）的区别吗？相关推荐

最新文章

热门文章