IE与DOM下访问内联样式和外部样式表的常用方法总结

最新推荐文章于 2021-08-04 04:18:33 发布

dhz43885

最新推荐文章于 2021-08-04 04:18:33 发布

阅读量178

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/junyistar/archive/2008/04/14/1132674.html

版权

1IE与DOM下访问内联样式的常用方法

1ie下访问内联样式的方法和style的两个常用属性
1this.style.cssText
<div id="div1" style="background-color: red; height: 50px; width: 50px"
οnclick="alert(this.style.cssText)"></div>
//outputs background-color: red; height: 50px; width: 50px

2每个元素都有一个currentStyle用以反映当前style属性。
oDiv.currentStyle.backgroundColor

至于ie访问内敛样式只需写Element.style.propertyValue

2DOM下访问内联样式的常用方法.(firefox)

通过Element.style访问如下方法。
1getPropertyValue(name) 返回样式值
2getPropertyPriority() 若指定important,则返回important,否则返回空。
3item(index) 返回给定的目标索引处的css属性名称
4removePropertyPriority(name) 移除指定样式。
5setProperty(propertyName,value,priority) 设置属性，最后一个为空/important

< html >
     < head >
         < title > Style Example </ title >
         < script type ="text/javascript" >
             function useMethods() {
                 var oDiv = document.getElementById( " div1 " );
                alert(oDiv.style.item( 0 ));     // outputs "background-color"
                alert(oDiv.style.getPropertyValue( " background-color " ));
                oDiv.style.removeProperty( " background-color " );

            }
         </ script >
     </ head >
     < body >
         < div id ="div1" style ="background-color: red; height: 50px; width: 50px"   onmouseover ="this.style.setProperty('background-color', 'blue', '')"
             onmouseout ="this.style.setProperty('background-color', 'red', '')" ></ div >< br />
         < input type ="button" value ="Use Methods" onclick ="useMethods()" />
     </ body >
</ html >

(提示：仅firefox下可以运行，IE不支持这些方法)

3IE与DOM访问外部样式的方法及常用属性
看个例子吧，里面针对IE和DOM的不同，及各个属性的使用我已经在注释里写明了。

< html >

< head >

< style type ="text/css" >

div.special {

}{

background-color: red;

height: 10px;

width: 10px;

margin: 10px;

}

</ style >

< script type ="text/javascript" >

function changeBackgroundColor()

{

var oDiv = document.getElementById("div1");

oDiv.style.backgroundColor = "blue";

var oRules = document.styleSheets[0].cssRules || document.styleSheets[0].rules;//检测浏览器是哪个牌子的

alert(oRules[0].selectorText);//outputs DIV.special "selectorText"返回样式名称

//alert(oRules[0].cssText);//outputs undefine 属于内联样式属性

alert(oRules[0].style.backgroundColor);//outputs red

alert(oDiv.style.backgroundColor); //blue 可以以数组形式访问alert(oDiv.style["backgroundColor"]);

//因为style本身就是一个集合。

alert(oDiv.currentStyle.backgroundColor);//for IE //outputs blue

//（currentStyle为所有样式作用计算得出的最终样式）实际是不存在的，所以也不能改变其值

//只能通过属性赋值改变。

//alert(document.defaultView.getComputedStyle(oDiv,null).backgroundColor);//for dom 类比currentStyle

}

</ script >

</ head >

< body >

< div id ="div1" class ="special" ></ div >

< input type ="button" value ="Change Background Color" onclick ="changeBackgroundColor()" />

</ body >

</ html >

这里要注意的是在javascript里改变的样式，实际并没有改变样式表里的属性，相当于重写了外部属性
所以用oRules[0].style.backgroundColor访问样式表的时候，其值并没有改变改变的只是当前的外部样式的属性。oDiv.style.backgroundColor

4最后举一个用javascript动态给元素批量增加style的小例子。

提示：可以先在文本框内，根据需要修改代码后再运行

转载于:https://www.cnblogs.com/junyistar/archive/2008/04/14/1132674.html

dhz43885

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
IE与DOM下访问内联样式和外部样式表的常用方法总结

1IE与DOM下访问内联样式的常用方法1ie下访问内联样式的方法和style的两个常用属性1this.style.cssText<div id="div1" style="background-color: red; height: 50px; width: 50px"onclick="alert(this.style.cssText)"></div&...
复制链接

扫一扫