频道栏目
首页 > 程序开发 > 综合编程 > 其他综合 > 正文
元素样式控制
2015-07-29 10:41:17      个评论    来源:清箫的专栏  
收藏   我要投稿

样式的优先级

样式属性通过四种方式可以被添加,他们的优先级从高到低依次为:

1. Inline Styles;

2. Style Sheet Rules;

3. HTML Attributes(比如fill,height, width等);

4. HTML标签默认定义;

通用

Element.style

Element.style操作的是元素的styleattribute指定的样式(inline styles)。

Window.getComputedStyle()

getComputedStyle方法接受两个参数,第一个是要查询的元素,第二个参数可选,值是表示pseudo-element的字符串。getComputedStyle的优势就是可以获取pseudo元素的样式,而style, currentStyle和runtimeStyle都不行。但getComputedStyle返回的所有样式都是只读的。

IE

Element.currentStyle

currentStyle是由样式表单、inline样式和HTMLattributes决定的,是应用的样式设置的值,但并不能反映获取值时渲染所采用的值。比如样式设置为color:red; display:none,将返回currentStyle.color为red,尽管元素并没在页面上渲染。也就是说,currentStyle不受渲染与否的约束。

特点:

IE元素独有,Firefox和Chrome没有;currentStyle保存的是采用的样式设置,而不是最终值,比如color:green,currentTyle.color返回的依然是green,而不是#00FF00;currentStyle是异步的,因此页面还在加载的时候获取的值可能是过去的值,最好等body已经load成功之后再获取。

Element.runtimeStyle

Element.runtimeStyle表示的是由全局样式表单、inline样式和HTMLattributes指定的元素级联样式。

特点:

IE元素独有,Firefox和Chrome没有;runtimeStyle保存的是采用的样式设置,而不是最终值,比如color:green,currentTyle.color返回的依然是green,而不是#00FF00;修改runtimeStyle会影响currentStyle,但不会影响style对象;

Style, runtimeStyle和currentStyle的关系

style和runtimeStyle在功能上是相等的;修改style或runtimeStyle,都会影响currentStyle。但是,单独修改style不会影响runtimeStyle,同理,单独修改runtimeStyle也不会影响style。

虽然MSDN认为runtimeStyle和style等价,优先级相同,经过IE7,IE8,IE9,IE10,IE11实际测试后发现,一旦通过runtimeStyle设置某个样式属性之后,再通过style对象操作这个属性就不再起作用。因此,可以等同认为runtimeStyle的优先级比style高。

Window.getComputedStyle()

在IE中,这个方法其实返回的就是currentStyle。

从IE9开始支持这个方法,IE8和低于IE8的IE都不支持。

Firefox

window.getDefaultComputedStyle()

这是Firefox独有的方法,与getComputedStyle()的主要区别是getDefaultComputedStyle只返回用户代理和用户自定义的原样式,元素渲染之后,用户又重新编辑的样式被忽略。getComputedStyle才是元素现有的样式。

应用

获取元素的当前样式属性

1. 首先判断window有没有getComputedStyle方法,如果有,就用这个方法获取;一般来说,调用方式为document.defaultView.getComputedStyle()。

2. 如果没有getComputedStyle方法,针对IE,应该使用currentStyle。

去掉style所有样式

element.removeAttribute(style)。

同时修改多个样式属性

Element.style.cssText ='color:red;background-color:blue;border:5px solid black;';

这样写的问题是会删除掉style上原有的所有样式。

 

点击复制链接 与好友分享!回本站首页
相关TAG标签 样式 元素
上一篇:Snail—UI学习之代理传值Delegate
下一篇:Swift之贪婪的UIButton
相关文章
图文推荐
点击排行

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训 | 举报中心

版权所有: 红黑联盟--致力于做实用的IT技术学习网站