你真的知道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
你真的知道css三种存在样式(外联样式、内部样式、内联样式)的区别吗?的更多相关文章
- Python 45 css三种引入方式以及优先级
一:css三种引入方式 三种方式为:行间式 | 内联式 | 外联式 行间式 1.在标签头部的style属性内 2.属性值满足的是css语法 3.属性值用key:value形式赋值,value具 ...
- HTML&CSS基础-内联样式和内部样式表
HTML&CSS基础-内联样式和内部样式表 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.CSS(Cascading Style Sheets)简介 层叠样式表(Cas ...
- 修改html内联样式的方法
问题:如下图弹出页面操作不了 分析:审查元素,发现是内联元素样式z-index:19891015导致的,修改内联元素样式z-index:0发现可以操作了 解决方法:内联样式优先级高,再引入css覆盖样 ...
- CSS三种样式
CSS 指层叠样式表 (Cascading Style Sheets): 1 内联样式:无法复用,在元素style内写 ,很少使用: 2 内部样式:在head元素内style属性内写,此样式可以被当前 ...
- CSS三种插入样式表格式
首先简单理解浏览器与网页的交互过程 CSS样式表(stylesheet) cascading style sheet 级联样式表 表现HTML或XHTML文件样式的计算机语言:包含对字体.颜色.边距. ...
- css三种样式表写法
css三种样式表:1.内嵌样式表: <head> <style type="text/css"> 样式表写法 </style> < ...
- CSS三种样式表
1.外部样式表当样式需要应用于很多页面时,外部样式表将是理想的选择.在使用外部样式表的情况下,你可以通过改变一个文件来改变整个站点的外观.每个页面使用 <link> 标签链接到样式表. & ...
- CSS三种写法的优先级
在HTML文件中引入CSS样式有三种方法: 外部样式:通过link标签引入CSS样式: 内页样式:写在HTML页面里面的style标签里面: 行内样式:写在对应标签的style属性里面. 我知道一般情 ...
- 前端 CSS 三种引入方式
CSS三种引入方式 行内样式 内接样式 外部样式 链接式 导入式 行内样式 就是在标签加上style属性设置样式 <!DOCTYPE html> <html lang="e ...
随机推荐
- 第六十八篇、OC_按照某一字段对数值进行排序
代码中是根据"create_time_" 进行排序 ascending:决定的是升序还是降序排序 NSSortDescriptor *sortDescriptor = [[NS ...
- Cocos2d-x文本菜单
文本菜单是菜单项只是显示文本,文本菜单类包括了MenuItemLabel.MenuItemFont和MenuItemAtlasFont.MenuItemLabel是个抽象类,具体使用的时候是使用Men ...
- MVC5 属性路由
属性路由(attribute routing)是最新被引进到MVC5中的,它和传统路由共同组成了mvc5中的两种主要路由. 1. 高质量的url应该满足以下几点 域名便于记忆和拼写 简短 便于输入 可 ...
- C#高效率导出Excel
首先,需要引用excel的库: Microsoft.Office.Interop.Excel.Application excel = new Microsoft.Office.Interop.Exce ...
- JAVA:变量,数据类型,运算符,流程控制(简介)<1>
一.安装和配置jdk 1.jdk是什么? (1).jdk全称是Java Development Kit, Java开发工具包; (2).jdk是sun公司开发的; (3).jdk主要包括:jre(Ja ...
- ZigBee HA示例程序分析
ZigBee协议栈中自带的HomeAutomation例程,虽然也是操作灯泡,但是,是通过ZCL来统一处理的,符合HA profile规范,互连互操作性较好.下面就简要分析以下ZCL的使用. 在任务数 ...
- 解决Eclipse中Java工程间循环引用而报错的问题
如果myeclipse 报如下错误 A cycle was detected in the build path of project 如果我们的项目包含多个工程(project),而它们之间又是循 ...
- mycat1.5~1.6的一个bug
以下语句在mysql单库中执行正常: SELECT * FROM device WHERE devicetype='AMS.Monitoring.XlCloud.QKL8154.XLCloudDevi ...
- Fedora 20下安装官方JDK替换OpenJDK并配置环境变量
Fedora 20自带OpenJDK,所以如果安装官方的JDK的话要先删除OpenJDK,步骤如下: 1:rpm -qa|grep jdk 查看当前的jdk情况. 2:yum -y remove ja ...
- javascript中的光标
最近项目中要做一个键盘操作,光标移动的功能:增强用户体验:问朋友查资料了解到这方面的知识:整理备忘: 1.IE使用textRange对象,其他使用selectionStart selectionEnd ...