js中獲取css樣式 getComputedStyle
在js中直接用點方法是沒有辦法獲取到外鏈式、內嵌式的樣式表。只能夠獲取到行內樣式，然後就誕生了這篇部落格。
一、js中獲取行內樣式
在js中直接獲取css的樣式，只能獲取到行內樣式表。具有兩種方法，程式碼如下：
<div id="myDiv" style = "width:100px; height:100px; background-color:red; border:1px solid black"></div> <script> var myDiv = document.getElementById('myDiv'); alert(myDiv.style.width); //100px alert(myDiv.style['height']); //100px alert(myDiv.style.backgroundColor); //red </script>
在這裡注意呼叫的方法，直接用點方法，或者用[‘屬性名’]來獲取
二、js中獲取外鏈css方法
在外鏈或者是內嵌的樣式表中，無法使用點方法等方法來獲取css的屬性，只能夠用下面一種方法：
window.getComputedStyle(element，當前元素的偽類)，在最新版中，已經拋棄了偽元素的使用，在早期版本中一般用null進行表示。因此一般採用：
window.getComputedStyle（element）;
element表示的是所要獲取的元素的樣式，此時輸出的是一個物件，此物件中包含的是一個元素中的所有樣式，無論是否使用。
呼叫程式碼如下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Title</title> <style> .box{ width: 100px; height: 100px; padding:30px; background-color: palegreen; background-position:-24px; } </style> </head> <body> <div class="box"></div> </body> </html> <script> box = document.querySelector('.box'); console.log(window.getComputedStyle(box)); </script>
輸出如下格式：
輸出的是一個物件，具有許多的樣式，就不截圖出來了，很多很多，現在說如何獲取自己想要的樣式。
獲取所需的樣式：
只需要使用點方法就可以呼叫屬性方法啦，比如：window.getComputedStyle(box).padding； 這個時候就能夠輸出元素設定的paading值。
此時獲取到的數值全部都是字串的形式，背景顏色輸出的是rgb的值
在呼叫的時候，要小心使用，因為是字串的形式。並且背景顏色輸出的是rgb的值哦，注意使用，每一次要呼叫的時候，可以先輸出一下，看一下到底是什麼格式，比較方便啦~
具體程式碼：
box = document.querySelector('.box'); // console.log(window.getComputedStyle(box)); var obj= window.getComputedStyle(box); console.log(obj.padding); //30px console.log(obj.backgroundColor); //red ----rgb(255,0,0)
** 三、兩種的區別**
element.style.attr ------ 這種方法是可讀可寫的，也就是能夠改變樣。只能夠獲取行內樣式，獲取其他格式的時候是輸出為空的。但是如果是在js中，重新對樣式進行賦值，是可以獲取到的，因為js中新增css樣式，是新增到行內樣式上的，即：box.style.width = 200+‘px’ ,此時是可以獲取並修改的，因為是行內樣式。
window.getComputedStyle(element)----只可讀，只能夠獲取，不能夠修改樣式。
四、最簡單的方法–JQ
具體程式碼如下:
//jquery方法
const jq_width = $('.box').css('width');
const jq_lineHeight = $('.box').css('line-height');
console.log(jq_width,jq_lineHeight);//200px 150px
最後要告訴自己，腦子不轉，真的會變笨的！！！