bwin766net必赢亚洲:js获取css的各种样式并且设置

作者:计算机知识

   众多周知 CSS3 扩张了成千上万性质,在读写的时候就从未原本那么方便了。

<body>  
<p id=”qq” class=”ss” >sdf</p> 
<script type=”text/javascript”>  
function GetCurrentStyle (obj, prop) {     
    if (obj.currentStyle) {        
        return obj.currentStyle[prop];     
    }      
    else if (window.getComputedStyle) {        
        propprop = prop.replace (/([A-Z])/g, “-$1”);           
        propprop = prop.toLowerCase ();        
        return document.defaultView.getComputedStyle (obj,null)[prop];     
    }      
    return null;   
}   
var dd=document.getElementById(“qq”);   
alert(GetCurrentStyle(dd,”width”));   
</script>  
</body>  

通过js获取成分css样式的点子
1.obj.style以此方式只好收获写在html标签的写在style属性中的值,而一点办法也想不出来获得定义在style type="text/css'中的属性

js原生获得css样式,并且安装,看似轻便,其实并不轻松,大家平常用的ele.style.样式,只好获取内嵌的体制,不过大家写的体裁基本都在style属性里面;

  如:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“> 
<html xmlns=”http://www.w3.org/1999/xhtml“> 
<head> 
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ /> 
<title>JS获取CSS属性值</title> 
<style type=”text/css”> 
.ss{color:#cdcdcd;} 
</style> 
</head> 
<body> 
<div id=”css88″ class=”ss” style=”width:200px; height:200px; background:#333333″>JS获取CSS属性值</div> 
<script type=”text/javascript”> 
alert(document.getElementById(“css88″).style.width);//200px 
alert(document.getElementById(“css88″).style.color);//空白 
</script> 
</body> 
</html> 

bwin766net必赢亚洲:js获取css的各种样式并且设置他们的方法,方法获取css属性值。那边我们就要求:

  <div style="left:100px"></div>

2.IE中行使的是obj.currentStyle方法,而FF使用的则是getComputedStyle方法
DOM2级样式巩固了document.defaultView,提供了getComputedStyle()方法
其一措施接受八个参数:要获取计量样式的因素和贰个伪成分字符串,比如:after.假如无需伪成分,第一个参数可以是null,该方法将会回来二个CSSStyleDeclaration对象,当中蕴藏当前因素的具有总括样式

下边那么些代码首假若安装为了包容IE这外甥;

 只记挂行间样式的话,只需 div.style.left 就可收获,设置的时候也只须要div.style.left='100px' 就能够。很轻便。

<!DOCTYPE html> 
<html> 
<head> 
<title>计算元素样式</title> 
<style> 
#myDiv { 
background-color:blue; 
width:100px; 
height:200px; 
} 
</style> 
<body> 
<div id ="myDiv" style="background-color:red; border:1px solid black"></div> 
<script> 
var myDiv = document.getElementById("myDiv"); 
var computedStyle = document.defaultView.getComputedStyle(myDiv, null); 
alert(computedStyle.backgroundColor); //"red" 
alert(computedStyle.width); //"100px" 
alert(computedStyle.height); //"200px" 
alert(computedStyle.border); //在某些浏览器中是“1px solid black” 
</script> 
</body> 
</head> 
</html>
function getStyle(element, attr) {
  if (element.currentStyle) {
    return element.currentStyle[attr];//傻逼IE的获取元素的方法
  } else {
    return getComputedStyle(element, null)[attr];
  }
}

 但是css3来了

边框属性恐怕也不会回到样式表中实际的border准则(Opera会重返,但任何浏览器不会)。
留存那几个差距的由来是见仁见智浏览器解释综合质量的不二法门分歧,因为设置这种性质实际上会提到大多任何的属性。在装置border时,实际上是安装了多少个边的边框宽度、颜色、样式属性。由此,即便computedStyle.border不会在有着浏览器中都重临值,但computedStyle.borderLeftWidth则会再次回到值。

平常我们一般能够用 getComputedStyle(元素,null)[属性]

本文由bwin必赢发布,转载请注明来源

关键词: JavaScript web学习