㈠ js怎麼獲取css樣式里的background屬性值呢
ss文件中如何得到某個屬性值：
一、getComputedStyle是一個可以獲取當前元素所有最終使用的CSS屬性值，
返回的是一個CSS樣式聲明對象 ， 只讀， 此方法支持Firefox瀏覽器;
語法：var style=window.getComputedStyle(「元素」，「偽類」);第一個參數是必須的，第二個為可選的。
二、currentStyle 是一款可以兼容IE瀏覽器的屬性返回的是當前所有最終使用的CSS屬性值，
利用element.CurrentStyle.attribute可獲取
其與getComputedStyle區別：1、 currentStyle不支持偽類樣式獲取；
2、currentStyle不支持現代瀏覽器，支持IE
代碼說明：
[html] view plain
<span style="font-size:14px;"><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style type="text/css">
#div1{
width:100px;height:100px;background: red;
}
</style>
<body>
<div id="div1"></div>
</body>
<script type="text/javascript">
var oDiv = document.getElementById('div1');
/*
只能獲取，不能設置
獲取到的是計算後的樣式
最好不要獲取復合樣式
所獲取的樣式要設初使值
獲取到的樣式類型是字元串
別空格 [' width']
*獲取到的樣式帶px的
transform 獲取不到
transition 不準確
*/
function getStyle(obj,attr){
if(obj.currentStyle){ //IE
return obj.currentStyle[attr];
}else{
return getComputedStyle(obj,"偽類")[attr]; //Firefox
}
}
alert(getStyle(oDiv1,'background'));</html></span>
㈡ 急！怎麼用js提取出span標簽內style里的屬性值
CSS的樣式分為三類：
內嵌樣式：是寫在Tag裡面的，內嵌樣式只對所有的Tag有效。
內部樣式：是寫在HTML的裡面的，內部樣式只對所在的網頁有效。
外部樣式表：如果很多網頁需要用到同樣的樣式(Styles)，將樣式(Styles)寫在一個以.css為後綴的CSS文件里，然後在每個需要用到這 些樣式(Styles)的網頁里引用這個CSS文件。
getComputedStyle是一個可以獲取當前元素所有最終使用的CSS屬性值。返回的是一個CSS樣式對象([object CSSStyleDeclaration])
currentStyle是IE瀏覽器的一個屬性，返回的是CSS樣式對象
element指JS獲取的DOM對象
element.style //只能獲取內嵌樣式
element.currentStyle //IE瀏覽器獲取非內嵌樣式
window.getComputedStyle(element,偽類) //非IE瀏覽器獲取非內嵌樣式
document.defaultView.getComputedStyle(element,偽類)//非IE瀏覽器獲取非內嵌樣式
註：Gecko 2.0 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1) 之前，第二個參數「偽類」是必需的（如果不是偽類，設置為null），現在可以省略這個參數。
下面的html中包含兩種css樣式，id為tag的div是內嵌樣式，而id為test的div樣式為內部樣式.
<!doctypehtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<metaname="Generator"content="EditPlus®">
<metaname="Author"content="YvetteLau">
<metaname="Keywords"content="關鍵字">
<metaname="Description"content="描述">
<title>Document</title>
<style>
#test{
width:500px;
height:300px;
background-color:#CCC;
float:left;
}
</style>
</head>
<body>
<divid="test"></div>
<divid="tag"style="width:500px;height:300px;background-color:pink;"></div>
</body>
</html>
<scripttype="text/javascript">
window.onload=function(){
vartest=document.getElementById("test");
vartag=document.getElementById("tag");
//CSS樣式對象:CSS2Properties{},CSSStyleDeclaration
console.log(test.style);//火狐返回空對象CSS2Properties{}，谷歌返回空對象CSSStyleDeclaration{}
console.log(tag.style);//返回CSS2Properties{width:"500px",height:"300px",background-color:"pink"}
//element.style獲取的是內嵌式的style，如果不是內嵌式，則是一個空對象
console.log(tag.style.backgroundColor);//pink
console.log(tag.style['background-color']);//pink
//獲取類似background-color,border-radius,padding-left類似樣式的兩種寫法啊
console.log(test.currentStyle)//火狐和谷歌為Undefined,IE返回CSS對象
console.log(window.getComputedStyle(test,null))//谷歌返回CSSStyleDeclaration{……}，火狐返回CSS2Properties{……}
console.log(window.getComputedStyle(test))
//效果同上,但是在Gecko2.0(Firefox4/Thunderbird3.3/SeaMonkey2.1)之前,第二個參數「偽類」是必需的(如果不是偽類,設置為null)
console.log(test.currentStyle.width);//500px(IE)
console.log(window.getComputedStyle(test).width);//500px;
console.log(window.getComputedStyle(test)['width']);//500px;
//document.defaultView.getComputedStyle(element,null)[attr]/window.getComputedStyle(element,null)[attr]
}
</script>
㈢ js中style，currentStyle和getComputedStyle的區別
obj.currentStyle[attr];這樣是取這個屬性，attr是變數。可以是height，可以是width。如果obj.currentStyle.attr是去取樣式的attr屬性，實際版上這個屬性是不存在的，所權以不行。//什麼時候寫成[attr]這樣attr是個變數的時候。returngetComputedStyle(obj,false)[attr];//這個也是，同樣有些不理解同上