利用JavaScript獲取瀏覽器計算後的樣式
阿新 • • 發佈：2022-05-03
HTML5學堂：JavaScript可以用style物件給標籤設定樣式、獲取樣式，但是利用style物件獲取的樣式只能是標籤內聯的樣式，今天要給大家講解的是利用currentStyle物件與getComputedStyle方法來獲取瀏覽器計算後的樣式。
哪些樣式是屬於瀏覽器計算後的樣式
要檢測標籤的樣式有包含在頭部書寫樣式、標籤內聯樣式和外部的樣式，即瀏覽器計算後的樣式。
getComputedStyle(element[, pseudoElt])方法
element用於計算樣式的標籤;pseudoElt可選指定一個偽元素進行匹配。對於常規的元素來說可省略。
window.getComputedStyle(element[, pseudoElt])方法獲取標籤在瀏覽器裡計算的樣式。
例項
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>HTML5Course - 夢幻雪冰</title> <link rel="stylesheet" href="reset.css"> <script type="text/javascript" src="jquery-1.8.3.min.js"></script> <style> .btn { width: 100px; } .btn:after { display: block; width: 20px; height: 20px; background-color: red; content: "."; } </style> </head> <body> <div class="btn" id="con">HTML5學堂：劉國利、陳能堡</div> <script> var box = document.getElementById("con"); box.style.height = "1000px"; // 獲取標籤瀏覽器計算後的樣式 console.log(window.getComputedStyle(box, null).getPropertyValue("height")); console.log(window.getComputedStyle(box, null).getPropertyValue("width")); // 獲取偽元素瀏覽器計算後的樣式 console.log(window.getComputedStyle(box, "after")["content"]); console.log(window.getComputedStyle(box, "after")["background-color"]); // 注意：getComputedStyle(box, null).getPropertyValue("height")等價於getComputedStyle(box, null)["height"] </script> </body> </html>
關於defaultView
在許多JavaScript框架, getComputedStyle是通過 document.defaultView 物件來呼叫的。 大部分情況下，這是不需要的，因為可以直接通過window物件呼叫。但有一種情況，你必需要使用 defaultView, 那是在火狐3.6上訪問子框架內的樣式 (iframe)——資料來源mozilla
jQuery部分原始碼
例項
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>HTML5Course - 夢幻雪冰</title> <link rel="stylesheet" href="reset.css"> <script type="text/javascript" src="jquery-1.8.3.min.js"></script> <style> .btn { width: 100px; } .btn:after { display: block; width: 20px; height: 20px; background-color: red; content: "."; } </style> </head> <body> <div class="btn" id="con">HTML5學堂：劉國利、陳能堡</div> <script> var box = document.getElementById("con"); box.style.height = "1000px"; // 獲取標籤瀏覽器計算後的樣式 console.log(document.defaultView.getComputedStyle(box, null).getPropertyValue("height")); console.log(document.defaultView.getComputedStyle(box, null).getPropertyValue("width")); // 獲取偽元素瀏覽器計算後的樣式 console.log(document.defaultView.getComputedStyle(box, "after")["content"]); console.log(document.defaultView.getComputedStyle(box, "after")["background-color"]); </script> </body> </html>
瀏覽器支援程度
currentStyle物件是IE瀏覽器專有
從上面可以看出IE6~8不支援getComputedStyle該方法，利用currentStyle物件處理相容咯~
例項
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5Course - 夢幻雪冰</title>
<link rel="stylesheet" href="reset.css">
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<style>
.btn {
width: 100px;
}
.btn:after {
display: block;
width: 20px;
height: 20px;
background-color: red;
content: ".";
}
</style>
</head>
<body>
<div class="btn" id="con">HTML5學堂：劉國利、陳能堡</div>
<script>
var box = document.getElementById("con");
box.style.height = "1000px";
// 獲取標籤瀏覽器計算後的樣式
console.log(box.currentStyle["width"]);
console.log(box.currentStyle["height"]);
// 注意：獲取偽元素瀏覽器計算後的樣式——該物件不支援
</script>
</body>
</html>獲取標籤瀏覽器計算後的樣式相容處理
/*
* 功能：獲取渲染後標籤的樣式，element是標籤的物件，property是標籤樣式屬性值
* 引數：element是元素物件，property是樣式屬性
* demo：getStyle(move, "marginLeft");
* author：HTML5學堂
*/
function getStyle(element, property){
var proValue = null;
if (!document.defaultView) {
proValue = element.currentStyle[property];
} else {
proValue = document.defaultView.getComputedStyle(element)[property];
}
return proValue;
}