首頁 > 開發者 > JavaScript
style currentStyle getComputedStyle的區別和用法，getcomputedstyle
先介紹下層疊樣式表的三種形式:
1.內聯樣式，在html標籤中style屬性設定。
<p><style type="text/css"> .stuff{color:#f90;}</style>
3.外部樣式，通過link標籤引入外部樣式
<link type="text/css" rel="stylesheet" href="path/style.css" />/*style.css*/@charset "utf-8";.stuff{color:#f90;}
進入正題。
style屬性擷取樣式值，使用方法：obj.style.attr
style只能擷取元素的內聯樣式，內部樣式和外部樣式使用style都擷取不到。
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title> <style type="text/css"> #stuff{width:300px;} </style> <link rel="stylesheet" href="a.css"></head><body> <div id="stuff">Hello world</div> <script type="text/javascript"> var stuff = document.getElementById('stuff'); //如果只設定外部樣式和內嵌樣式擷取的是空值 alert(stuff.style.width);//400px</script></body></html>//外部樣式@charset "utf-8";#stuff{width:100px;}
currentStyle和getComputedStyle方法既可以擷取內聯樣式，也可以擷取外部樣式和內嵌樣式的值。擷取的順序是內聯樣式->外部樣式->內嵌樣式。他們之間的區別是currentStyle只適用於IE瀏覽器，getComputedStyle適用於Firefox、Opera、Safari、Chrome瀏覽器。使用方法:
//currentStylevar style = obj.currentStyle['attr']或obj.currentStyle.attr//getComputedStylevar style = getComputedStyle(obj, pseudoElt)['attr']或getComputedStyle(obj, pseudoElt).attr其中，pseudoElt表示如:after, :before之類的偽類元素，如果不用偽類的話設定為null即可。//為了瀏覽器的相容性，可以封裝成一個函數使用function getStyle(obj, attr){ if(obj.currentStyle){ return obj.currentStyle['attr']; }else{ return getComputedStyle(obj, null)['attr']; }}
getComputedStyle、currentStyle和style的區別是:
getComputedStyle和currentStyle只能擷取屬性值，無法設定屬性。如果想設定屬性值，可是使用ob.style.attr.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
