教你如何通過JavaScript讀取元素的樣式
阿新 • • 發佈：2022-01-23
目錄
- 一、getComputedStyle()
- 1、getComputedStyle()是window的方法，可以獲取元素當前的樣式
- 2、兩個引數
- 3、程式碼例項
- 4、瀏覽器效果
- 二、定義一個方法獲取元素資訊
- 1、程式碼例項
- 2、瀏覽器顯示
- 三、clientWidth和clientHeight
- 1、這兩個元素是獲取元素的寬度和高度，不帶px
- 2、這兩個元素是隻讀的，不可修改
- 3、程式碼例項
- 4、瀏覽器展示
- 四、offsetWidth和offsetHeight
- 1、獲取元素的整個的寬度和高度，包括內容區、內邊距和邊框
- 2、程式碼例項
- 3、瀏覽器展示
- 五、offsetParent
- 1、獲取當前元素的父元素
- 2、程式碼例項
- 3、瀏覽器展示
- 六、offsetLeft和offsetTop
- 1、offsetLeft
- 2、offsetTop
- 七、scrollWidth和scrollHeight
- 1、scrollWidth
- 2、scrollHeight
- 八、scrollLeft和scrollTop
- 1、scrollLeft
- 2、scrollTop
- 九、 事件的冒泡
- 1、 事件的冒泡指的是事件的向上傳遞，當後代元素的事件被觸發時，其父元素的相同事件http://www.cppcns.com也會被觸發。
- 2、可以通過設定，取消事件的冒泡
- 3、程式碼例項
- 4、瀏覽器展示
- 總結
一、getComputedStyle()
1、getComputedStyle()是window的方法，可以獲取元素當前的樣式
Window.getComputedStyle()方法返回一個物件，該物件在應用活動樣式表並解析這些值可能包含的任何基本計算後報告元素的所有屬性的值。 私有的CSS屬性值可以通過物件提供的API或通過簡單地使用CSS屬性名稱進行索引來訪問。
語法
let style = window.getComputedStyle(element,[pseudoElt]);
2、兩個引數
要獲取樣式的元素
可以傳遞一個偽元素，一般都傳null
該方法會返回一個物件，物件中封裝了當前元素對應的樣式，可以通過物件樣式名來讀取樣式，如果獲取的樣式沒有設定，則會獲取到真實的值，而不是預設值。
3、程式碼例項
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box1{
width: 120px;
height: 120px;
background-color: red;
}
</style>
<script type="text/">
window.onload = function(){
//點選按鈕以後讀取box1的樣式
var box1 = document.getElementById("box1");
var btn01 = document.getElementById("btn01");
btn01.onclick = function(){
var obj = getComputedStyle(box1,null);
alert(getComputedStyle(box1,null).width);
};
};
</script>
</head>
<body>
<button id="btn01">戳我一下</button>
<br /><br />
<div id="box1" ></div>
</body>
</html>4、瀏覽器效果
備註：IE無效
二、定義一個方法獲取元素資訊
1、程式碼例項
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box1{
width: 120px;
height: 120px;
background-color: red;
}
</style>
<script type="text/script">
window.onload = function(){
//點選按鈕以後讀取box1的樣式
var box1 = document.getElementById("box1");
var btn01 = document.getElementById("btn01");
btn01.onclick = function(){
// 定義一個函式，用來獲取指定元素的當前的樣式
var ret = getBoxStyle(box1,"width");
alert(ret);
};
};
/*
* 引數：
* obj 要獲取樣式的元素
* name 要獲取的樣式名
*/
function getBoxStyle(obj,name){
if(window.getComputedStyle){
//谷歌/edge瀏覽器，具有getComputedStyle()方法
return getComputedStyle(obj,null)[name];
}else{
//IE沒有getComputedStyle()方法，下面為IE8的方式
return obj.currentStyle[name];
}
}
</script>
</head>
<body>
<buhttp://www.cppcns.comtton id="btn01">戳我一下</button>
<br /><br />
<div id="box1" ></div>
</body>
</html>
2、瀏覽器顯示
三、clientWidth和clientHeight
1、這兩個元素是獲取元素的寬度和高度，不帶px
2、這兩個元素是隻讀的，不可修改
3、程式碼例項
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box1{
width: 120px;
height: 150px;
background-color: red;
}
</style>
<script type="text/javascriptkIDdi">
window.onload = function(){
var box1 = document.getElementById("box1");
var btn01 = document.getElementById("btn01");
btn01.onclick = function(){
alert(box1.clientWidth);
alert(box1.clientHeight);
};
};
</script>
</head>
<body id="body">
<button id="btn01">親我一下</button>
<div id="box1"></div>
</body>
</html>
4、瀏覽器展示
四、offsetWidth和offsetHeight
1、獲取元素的整個的寬度和高度，包括內容區、內邊距和邊框
2、程式碼例項
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box1{
width: 100px;
height: 100px;
background-color: red;
padding: 10px;
border: 10px solid yellow;
}
</style>
<script type="text/javascript">
window.onload = function(){
var box1 = document.getElementById("box1");
var btn01 = document.getElementById("btn01");
btn01.onclick = function(){
/*
* offsetWidth
* offsetHeight
* - 獲取元素的整個的寬度和高度，包括內容區、內邊距和邊框
*/
alert(box1.offsetWidth);
};
};
</script>
</head>
<body id="body">
<button id="btn01">親我一下</button>
<br /><br />
<div id="box1"></div>
</body>
</html>
3、瀏覽器展示
五、offsetParent
1、獲取當前元素的父元素
2、程式碼例項
var op = box1.offsetParent; alert(op.id);
3、瀏覽器展示
六、offsetLeft和offsetTop
1、offsetLeft
當前元素相對於其定位父元素的水平偏移量
2、offsetTop
當前元素相對於其定位父元素的垂直偏移量
七、scrollWidth和scrollHeight
1、scrollWidth
可以獲取元素整個滾動區域的寬度
2、scrollHeight
可以獲取元素整個滾動區域的高度
八、scrollLeft和scrollTop
1、scrollLeft
獲取水平滾動條滾動的距離
2、scrollTop
獲取垂直滾動條滾動的距離
當滿足scrollHeight - scrollTop == clientHeight，說明垂直滾動條滾動到底了。
當滿足scrollWidth - scrollLeft == clientWidth，說明水平滾動條滾動到底了。
九、 事件的冒泡
1、 事件的冒泡指的是事件的向上傳遞，當後代元素的事件被觸發時，其父元素的相同事件也會被觸發。
2、可以通過設定，取消事件的冒泡
3、程式碼例項
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#nz{
width: 200px;
height: 100px;
background-color: rgb(205,112,50);
}
#yy{
background-color: yellow;
}
</style>
<script type="text/javascript">
window.onload = function(){
//為雲韻繫結一個單擊響應函式
var yy = document.getElementById("yy");
yy.onclick = function(event){
event = event || window.event;
alert("我是雲韻");
//取消冒泡
//可以將事件物件的cancelBubble設定為true，即可取消冒泡
//event.cancelBubble = true;
};
//為哪吒繫結一個單擊響應函kIDdi數
var nz = document.getElementById("nz");
nz.onclick = function(event){
event = event || window.event;
alert("我是哪吒");
event.cancelBubble = true;
};
//為body繫結一個單擊響應函式
document.body.onclick = function(){
alert("我是body的單擊響應函式");
};
};
</script>
</head>
<body>
<div id="nz">
我是哪吒
<span id="yy">我是雲韻</span>
</div>
</body>
</html>
4、瀏覽器展示
總結
到此這篇關於JavaScript讀取元素的樣式的文章就介紹到這了,更多相關JavaScript讀取元素的樣式內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！