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

你真的知道css三种存在样式(外联样式、内部样式、内联样式)的区别吗?的更多相关文章

  1. Python 45 css三种引入方式以及优先级

    一:css三种引入方式 三种方式为:行间式 | 内联式 | 外联式 行间式   1.在标签头部的style属性内  2.属性值满足的是css语法  3.属性值用key:value形式赋值,value具 ...

  2. HTML&CSS基础-内联样式和内部样式表

    HTML&CSS基础-内联样式和内部样式表 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.CSS(Cascading Style Sheets)简介 层叠样式表(Cas ...

  3. 修改html内联样式的方法

    问题:如下图弹出页面操作不了 分析:审查元素,发现是内联元素样式z-index:19891015导致的,修改内联元素样式z-index:0发现可以操作了 解决方法:内联样式优先级高,再引入css覆盖样 ...

  4. CSS三种样式

    CSS 指层叠样式表 (Cascading Style Sheets): 1 内联样式:无法复用,在元素style内写 ,很少使用: 2 内部样式:在head元素内style属性内写,此样式可以被当前 ...

  5. CSS三种插入样式表格式

    首先简单理解浏览器与网页的交互过程 CSS样式表(stylesheet) cascading style sheet 级联样式表 表现HTML或XHTML文件样式的计算机语言:包含对字体.颜色.边距. ...

  6. css三种样式表写法

    css三种样式表:1.内嵌样式表: <head>  <style type="text/css">   样式表写法  </style> < ...

  7. CSS三种样式表

    1.外部样式表当样式需要应用于很多页面时,外部样式表将是理想的选择.在使用外部样式表的情况下,你可以通过改变一个文件来改变整个站点的外观.每个页面使用 <link> 标签链接到样式表. & ...

  8. CSS三种写法的优先级

    在HTML文件中引入CSS样式有三种方法: 外部样式:通过link标签引入CSS样式: 内页样式:写在HTML页面里面的style标签里面: 行内样式:写在对应标签的style属性里面. 我知道一般情 ...

  9. 前端 CSS 三种引入方式

    CSS三种引入方式 行内样式 内接样式 外部样式 链接式 导入式 行内样式 就是在标签加上style属性设置样式 <!DOCTYPE html> <html lang="e ...

随机推荐

  1. Xcode - 方法注释插件

    VVDocumenter-Xcode,自动生成注释,感觉比较方便的插件,分享下,应该很多人都知道= = 在 https://github.com/onevcat/VVDocumenter-Xcode  ...

  2. NodeJS服务器:一行代码 = 一个的HTTP服务器

    从这一篇开始,我们进入技术讲解的话题,逐步实现用NodeJS实现文件的传送共享服务. 前文我们讲过,NodeJS是最擅长做网络服务器的,今天我们就来用NodeJS做一个最简单的服务器. 先看一幅图: ...

  3. UBUNTU12.4 安装磊科无线网卡驱动

    UBUNTU12.4 安装磊科无线网卡驱动 在淘宝低价买了一个网卡,回来发现不能用 ,擦 无语了. 无赖只能在网上各种找驱动,编译 安装 .今天在终于安装好了WIFI驱动了: 下载地址:https:/ ...

  4. 在 linux x86-64 模式下分析内存映射流程

    前言 在上一篇中我们分析了 linux 在 x86-32 模式下的虚拟内存映射流程,本章主要继续分析 linux 在 x86-64 模式下的虚拟内存映射流程. 讨论的平台是 x86-64, 也可以称为 ...

  5. ASP.NET MVC 表单的几种提交方式

    下面是总结一下在ASP.NET MVC中表单的几种提交方式. 1.Ajax提交表单 需要引用 <script type="text/javascript" src=" ...

  6. Sql 执行删除修改之前添加备份

      backyw备份滴数据库名称,w20151124sendmaster 表名称 select  * into backyw..w20151124sendmaster from Logistics.E ...

  7. 利用VSCode进行.Net Core初尝试

    1.下载.Net Core,https://www.microsoft.com/net/core#windows,按照页面提示进行SDK的安装. 2.下载VsCode,https://www.visu ...

  8. php错误收集

    1.Notice: Undefined offset: 1 in F:\www\my\test.php on line 39,原因offset:接下去的数字是出错的数组下标,一般是超出了数组的取值范围 ...

  9. php 文件上传类 实例分享

    最近在研究php上传的内容,找到一个不错的php上传类,分享下. <?php /** * 文件上传类 * class: uploadFile * edit: www.jbxue.com */ c ...

  10. 重拾C,一天一点点_4_随想

    刚才顺便又把二分默写了一遍,还好,这次比较顺利.算法这一块,一直是自己一块痛处,有时感觉自己的脑瓜子怎么就这么笨,后一想觉得肯定是锈逗了,确实啊,这么长时间不思考的脑子能机灵到哪呢?早就意识到这个问题 ...