小男孩‘自慰网亚洲一区二区,亚洲一级在线播放毛片,亚洲中文字幕av每天更新,黄aⅴ永久免费无码,91成人午夜在线精品,色网站免费在线观看,亚洲欧洲wwwww在线观看

搜索
分享

js獲取css值的方法：style、getComputedStyle和currentStyle

 一本正經(jīng)地胡鬧 2019-05-13

JS 獲取 html元素的樣式有三種方式：style、getComputedStyle 和 currentStyle等。區(qū)別在于：

（1）style 只能獲取行間樣式，但能設(shè)置樣式。

（2）getComputedStyle 和 currentStyle 能夠獲取 行間樣式/非行間樣式/瀏覽器默認(rèn)樣式，但存在瀏覽器兼容問題，且不能設(shè)置樣式。

一、element.style 獲取行間樣式，以及設(shè)置樣式

  1. <!DOCTYPE HTML>
  2. <html lang="zh-cn">
  3. <head>
  4. <meta charset="utf-8" />
  5. <title>Javascript</title>
  6. <style>
  7. *{margin: 0;padding: 0;}
  8. #box{width: 100px;height: 100px;margin-left: 100px;}
  9. </style>
  10. </head>
  11. <body>
  12. <div id="box" style="background-color:#ccc;margin-top:100px;"></div>
  13. <script>
  14. window.onload = function(){	
  15. 	var oBox = document.getElementById('box');
  16.         console.log(oBox.style.width);          //結(jié)果為：100px
  17. 	console.log(oBox.style.background);	//結(jié)果：rgb(204,204,204)，但ie下為空
  18. 	console.log(oBox.style.backgroundColor); //結(jié)果：rgb(204,204,204)或#ccc
  19. 	console.log(oBox.style.margin);		//結(jié)果為空
  20. 	console.log(oBox.style.marginTop);	//結(jié)果：100px
  21. 	oBox.style.height = '120px';		//設(shè)置樣式
  22. }
  23. </script>
  24. </body>
  25. </html>
style總結(jié)：

（1）對于復(fù)合屬性（如background），假設(shè)行間設(shè)置了樣式：background-color:#333，不能通過 element.style.background 來獲?。ㄒ娚厦胬樱?。

（2）css屬性使用駝峰法，如 backgroundColor、marginTop等。

（3）不同瀏覽器，一些 css 屬性值可能會發(fā)生轉(zhuǎn)換，如例子中的 background-color，標(biāo)準(zhǔn)瀏覽器會轉(zhuǎn)換為 rgb 形式。

二、getComputedStyle 獲取css屬性值

  1. <!DOCTYPE HTML>
  2. <html lang="zh-cn">
  3. <head>
  4. <meta charset="utf-8" />
  5. <title>Javascript</title>
  6. <style>
  7. #box{width: 100px;height: 100px;margin-left: 100px;}
  8. </style>
  9. </head>
  10. <body>
  11. <div id="box" style="background-color:#ccc;margin-top:100px;"></div>
  12. <script>
  13. window.onload = function(){	
  14. 	var oBox = document.getElementById('box');
  15. 	var a = getComputedStyle(oBox, null)['width']; // 100px
  16. 	var b = getComputedStyle(oBox, null).getPropertyValue('backgroundColor'); //chrome為null, ie為空
  17. 	var c = getComputedStyle(oBox, null)['backgroundColor'];// rgb(204,204,204)
  18. 	var d = getComputedStyle(oBox,null)['padding'];// chrome為0px, ie為空
  19. 	console.log(a, b, c, d);
  20. }
  21. </script>
  22. </body>
  23. </html>

getComputedStyle總結(jié)：

（1）標(biāo)準(zhǔn)瀏覽器，ie9+以上支持 getComputedStyle。

（2）對于復(fù)合屬性：使用 getPropertyValue 獲取屬性值時，不能使用駝峰寫法，如：例子中的 getpropertyValue('backgroundColor') 無法正確獲得值，而必須寫成 background-color。

（3）另外，以下寫法也正確：getComputedStyle(oBox, null)['backgroundColor']、getComputedStyle(oBox, null)['background-color']， 以及 getComputedStyle(oBox, null).backgroundColor 等。

（4）當(dāng)沒有設(shè)置某個屬性值時，chrome 會讀取瀏覽器該屬性的默認(rèn)值，而 ie9+ 下結(jié)果為空。如例子中的 padding。

（5）getComputedStyle 第二個參數(shù)為”偽類“，一般用不著，設(shè)置為 null 即可。

三、IE 下 currentStyle 獲取css 屬性值

還是上面的例子：

  1. <script>
  2. window.onload = function(){	
  3. 	var oBox = document.getElementById('box');
  4. 	var a = oBox.currentStyle['width']; // 100px
  5. 	var b = oBox.currentStyle['background-color'];	// #ccc
  6. 	var c = oBox.currentStyle['backgroundColor'];	// #ccc
  7. 	var d = oBox.currentStyle.backgroundColor;	   // #ccc
  8. 	//var e = oBox.currentStyle.background-color;  錯誤
  9. 	var e = oBox.currentStyle['padding'];		// 0px
  10. 	console.log(a, b, c, d, e);
  11. }
  12. </script>

currentStyle 總結(jié)：

（1）只在 IE 下支持（網(wǎng)上 opera 也支持，但未測）。

（2）注意 ['backgroundColor']、['background-color'] 和 .backgroundColor 等寫法。

（3）未設(shè)置的屬性值，currentStyle 會讀取瀏覽器默認(rèn)值，如例子中的 padding。

四、不同瀏覽器下，獲取 css 屬性值 的兼容寫法

  1. function getStyle(oElement, sName){
  2. 	return oElement.currentStyle ? oElement.currentStyle[sName] : getComputedStyle(oElement, null)[sName];
  3. }

    本站是提供個人知識管理的網(wǎng)絡(luò)存儲空間，所有內(nèi)容均由用戶發(fā)布，不代表本站觀點。請注意甄別內(nèi)容中的聯(lián)系方式、誘導(dǎo)購買等信息，謹(jǐn)防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請點擊一鍵舉報。
    轉(zhuǎn)藏 分享 獻花（0）

    0條評論

    發(fā)表

    請遵守用戶 評論公約

    類似文章 更多