css樣式獲取，style，currentStyle，getComputedStyle

時間 2019-11-20

標籤 css 樣式獲取 style currentstyle getcomputedstyle 欄目 CSS 简体版

原文原文鏈接

對於css樣式的獲取問題，對於行內樣式，咱們能夠用style來獲取，可是對於內嵌和外部樣式的話，style就心有餘和力不足了。它是獲取不到這些樣式的javascript

此時就只有currentStyle和getComputedStyle上陣了。css

currentStyle是隻兼容各類IE的，可是不兼容火狐，谷歌的，而getComputeStyle的話是能夠兼容火狐，谷歌，和IE9+的。（如下測試均在谷歌和IE下）html

對於行內樣式：java

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- <link href="test.css" rel="stylesheet"> -->
    <script type="text/javascript" src="test.js" defer="defer"></script>
    <title>Document</title>
</head>
<style type="text/css">
</style>
<body>
    <div class="wrap" style="
    width:100px;
    height:100px;
    background-color:black;">
    </div>
</body>
</html>

此時用這着三種方法：瀏覽器

var oWrap = document.getElementsByTagName("div")[0];
window.onload = function (){
    console.log(oWrap.style.width);
    console.log(oWrap.currentStyle.width);
    console.log(getComputedStyle(oWrap,null).width);
}

獲得的結果是：測試