您现在的位置: 365建站网 > 365学习 > IE与DOM下访问内联样式和外部样式表的常用方法总结

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

文章来源:365jz.com     点击数:436    更新时间:2009-09-20 09:05   参与评论
1IE与DOM下访问内联样式的常用方法

1ie下访问内联样式的方法和style的两个常用属性
1this.style.CSSText
<div id="div1"  style="background-color: red; height: 50px; width: 50px"
onclick="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的小例子。


提示:可以先在文本框内,根据需要修改代码后再运行
Tag标签: javascript,css,dom,DOM高级编程

如对本文有疑问,请提交到交流论坛,广大热心网友会为你解答!! 点击进入论坛


发表评论 (436人查看0条评论)
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
用户名: 验证码: 点击我更换图片
最新评论
------分隔线----------------------------