Js取得取得樣式的常見方式-js教程-PHP中文網

首頁

web前端

js教程

Js取得取得樣式的常見方式

php中世界最好的语言

Nov 28, 2017 pm 03:26 PM

javascript常見方式

我們知道在JS裡如果要操作CSS，那麼最重要的就是取得樣式，以下就帶給大家一篇JS取得樣式最常見的幾種方法，給大家作為參考。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    div{
      color:yellow;
    }
  </style>
</head>
<body>
  <div style="width:100px;height:100px;background-color:red">This is div</div>
</body>
</html>

透過使用element.style屬性來取得

<script>
  var div = document.getElementsByTagName("div")[0];
  console.log(div.style.color); //""
  console.log(div.style.backgroundColor); //red
</script>

element.style屬性只能取得行內樣式，不能取得

由於element.style是元素的屬性，我們可以將屬性重新賦值來改寫元素的顯示。

<script>
    var div = document.getElementsByTagName("div")[0];
    div.style[&#39;background-color&#39;] = "green";
    console.log(div.style.backgroundColor); //green
  </script>

2.透過getComputedStyle和currentStyle來取得樣式

getComputedStyle的使用環境是chrome/safari/firefox IE 9,10,11

<script>
  var div = document.getElementsByTagName("div")[0];
  var styleObj = window.getComputedStyle(div,null);
  console.log(styleObj.backgroundColor); //red
  console.log(styleObj.color); //yellow
</script>

currentStyle在IE裡能得到完美支持，chrome不支持，ff不支持

<script>
    var div = document.getElementsByTagName("div")[0];
    var styleObj = div.currentStyle;
    console.log(styleObj.backgroundColor); //red
    console.log(styleObj.color); //yellow
  </script>

3.ele.style和getComputedStyle或currentStyle的區別

3.1 ele.style是讀寫的，而getComputedStyle和currentStyle是只讀寫的，而getComputedStyle和currentStyle是只讀寫的，而getComputedStyle和currentStyle是唯讀取的

3.2 ele.style只能得到行內style屬性裡面設定的CSS樣式，而getComputedStyle和currentStyle還能得到其他的預設值

3.3 ele.style得到的是style屬性裡的樣式，不一定是最終樣式，而其他兩個得到的是元素的最終CSS樣式

4.獲取樣式兼容性寫法

<script>
    //获取非行间样式(style标签里的样式或者link css文件里的样式)，obj是元素，attr是样式名
    function getStyle(obj,attr){
       //针对IE
       if(obj.currentStyle){
         return obj.currentStyle[attr];               //由于函数传过来的attr是字符串，所以得用[]来取值
       }else{
         //针对非IE
         return window.getComputedStyle(obj,false)[attr];
       }
    }
    function css(obj,attr,value){
       if(arguments.length == 2){
         return getStyle(obj,attr);
       }else{   
         obj.style[attr] = value;
       }
    }
  </script>
 
.window.getComputedStyle(ele[,pseudoElt]);

第二個參數如果是null或者省略，則取得得到是ele的CSSStyleDeclaration物件

如果是偽類，則取得到的是偽類的CSSStyleDeclaration物件

<style>
div{
  width:200px;
  height:200px;
  background-color:#FC9;
  font-size:20px;
  text-align:center;  
}
div:after{
  content:"This is after";
  display:block;
  width:100px;
  height:100px;
  background-color:#F93;
  margin:0 auto;
  line-height:50px;  
}
</style>
<body>
  <div id=&#39;myDiv&#39;>
    This is div
  </div> 
  <input id=&#39;btn&#39; type="button" value=&#39;getStyle&#39;/> 
  <script>
    var btn = document.querySelector(&#39;#btn&#39;);
    btn.onclick = function(){
      var div = document.querySelector(&#39;#myDiv&#39;);
      var styleObj = window.getComputedStyle(div,&#39;after&#39;);
      console.log(styleObj[&#39;width&#39;]);
    }
  </script>
</body>

getPropertyValue取得CSSStyleDeclaration物件中的指定屬性值

<script>
    var div = document.getElementsByTagName("div")[0];
    var styleObj = window.getComputedStyle(div,null);
    console.log(styleObj.getPropertyValue("background-color"));
</script>
 
getPropertyValue(propertyName);中的propertyName不能是驼峰式表示
obj.currentStyle[&#39;margin-left&#39;] 有效
obj.currentStyle[&#39;marginLeft&#39;]  有效   
window.getComputedStyle(obj,null)[&#39;margin-left&#39;]  有效
window.getComputedStyle(obj,null)[&#39;marginLeft&#39;]  有效
window.getComputedStyle(obj,null).getPropertyValue(&#39;margin-left&#39;)  有效
window.getComputedStyle(obj,null).getPropertyValue(&#39;marginLeft&#39;)   无效
obj.currentStyle.width   有效
obj.currentStyle.background-color 无效
obj.currentStyle.backgroundColor  有效
window.getComputedStyle(obj,null).width  有效
window.getComputedStyle(obj,null).background-color  无效
window.getComputedStyle(obj,null).backgroundColor 有效

綜上，就是帶有"-"的屬性不能直接點出來，所以有getPropertyValue方法來處理，但可以用[]來取代getPropertyValue

7.defaultView

在許多線上的示範程式碼中, getComputedStyle 是透過document.defaultView 物件來呼叫的。大部分情況下，這是不需要的，因為可以直接透過window物件呼叫。但有一種情況，你必需要使用defaultView, 那是在firefox3.6上訪問子框架內的樣式(iframe)

相信看了這些案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

相關閱讀：

在HTML裡用CSS隱藏div的方法

# #用Vue+CSS3怎麼做互動特效

前端怎麼解決emoji表情無法傳送的BUG

以上是Js取得取得樣式的常見方式的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

超越瀏覽器：現實世界中的JavaScriptApr 12, 2025 am 12:06 AM

JavaScript在現實世界中的應用包括服務器端編程、移動應用開發和物聯網控制：1.通過Node.js實現服務器端編程，適用於高並發請求處理。 2.通過ReactNative進行移動應用開發，支持跨平台部署。 3.通過Johnny-Five庫用於物聯網設備控制，適用於硬件交互。

使用Next.js（後端集成）構建多租戶SaaS應用程序Apr 11, 2025 am 08:23 AM

我使用您的日常技術工具構建了功能性的多租戶SaaS應用程序（一個Edtech應用程序），您可以做同樣的事情。首先，什麼是多租戶SaaS應用程序？多租戶SaaS應用程序可讓您從唱歌中為多個客戶提供服務

如何使用Next.js（前端集成）構建多租戶SaaS應用程序Apr 11, 2025 am 08:22 AM

本文展示了與許可證確保的後端的前端集成，並使用Next.js構建功能性Edtech SaaS應用程序。前端獲取用戶權限以控制UI的可見性並確保API要求遵守角色庫

JavaScript：探索網絡語言的多功能性Apr 11, 2025 am 12:01 AM

JavaScript是現代Web開發的核心語言，因其多樣性和靈活性而廣泛應用。 1)前端開發：通過DOM操作和現代框架（如React、Vue.js、Angular）構建動態網頁和單頁面應用。 2)服務器端開發：Node.js利用非阻塞I/O模型處理高並發和實時應用。 3)移動和桌面應用開發：通過ReactNative和Electron實現跨平台開發，提高開發效率。

JavaScript的演變：當前的趨勢和未來前景Apr 10, 2025 am 09:33 AM

JavaScript的最新趨勢包括TypeScript的崛起、現代框架和庫的流行以及WebAssembly的應用。未來前景涵蓋更強大的類型系統、服務器端JavaScript的發展、人工智能和機器學習的擴展以及物聯網和邊緣計算的潛力。

神秘的JavaScript：它的作用以及為什麼重要Apr 09, 2025 am 12:07 AM

JavaScript是現代Web開發的基石，它的主要功能包括事件驅動編程、動態內容生成和異步編程。 1)事件驅動編程允許網頁根據用戶操作動態變化。 2)動態內容生成使得頁面內容可以根據條件調整。 3)異步編程確保用戶界面不被阻塞。 JavaScript廣泛應用於網頁交互、單頁面應用和服務器端開發，極大地提升了用戶體驗和跨平台開發的靈活性。