教你如何通過(guò)JavaScript讀取元素的樣式
更新時(shí)間：2022年01月21日 10:02:10 作者：哪?吒
這篇文章主要給大家介紹了關(guān)于如何通過(guò)JavaScript讀取元素的樣式,文中通過(guò)實(shí)例代碼以及圖文介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
一、getComputedStyle()
1、getComputedStyle()是window的方法，可以獲取元素當(dāng)前的樣式
Window.getComputedStyle()方法返回一個(gè)對(duì)象，該對(duì)象在應(yīng)用活動(dòng)樣式表并解析這些值可能包含的任何基本計(jì)算后報(bào)告元素的所有CSS屬性的值。 私有的CSS屬性值可以通過(guò)對(duì)象提供的API或通過(guò)簡(jiǎn)單地使用CSS屬性名稱進(jìn)行索引來(lái)訪問(wèn)。
let style = window.getComputedStyle(element, [pseudoElt]);
2、兩個(gè)參數(shù)
要獲取樣式的元素
可以傳遞一個(gè)偽元素，一般都傳null
該方法會(huì)返回一個(gè)對(duì)象，對(duì)象中封裝了當(dāng)前元素對(duì)應(yīng)的樣式，可以通過(guò)對(duì)象樣式名來(lái)讀取樣式，如果獲取的樣式?jīng)]有設(shè)置，則會(huì)獲取到真實(shí)的值，而不是默認(rèn)值。
3、代碼實(shí)例
<!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/javascript">
window.onload = function(){
//點(diǎn)擊按鈕以后讀取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無(wú)效
二、定義一個(gè)方法獲取元素信息
1、代碼實(shí)例
<!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/javascript">
window.onload = function(){
//點(diǎn)擊按鈕以后讀取box1的樣式
var box1 = document.getElementById("box1");
var btn01 = document.getElementById("btn01");
btn01.onclick = function(){
// 定義一個(gè)函數(shù)，用來(lái)獲取指定元素的當(dāng)前的樣式
var ret = getBoxStyle(box1,"width");
alert(ret);
};
};
/*
* 參數(shù)：
* obj 要獲取樣式的元素
* name 要獲取的樣式名
*/
function getBoxStyle(obj , name){
if(window.getComputedStyle){
//谷歌/edge瀏覽器，具有g(shù)etComputedStyle()方法
return getComputedStyle(obj , null)[name];
}else{
//IE沒(méi)有g(shù)etComputedStyle()方法，下面為IE8的方式
return obj.currentStyle[name];
}
}
</script>
</head>
<body>
<button id="btn01">戳我一下</button>
<br /><br />
<div id="box1" ></div>
</body>
</html>2、瀏覽器顯示
三、clientWidth和clientHeight
1、這兩個(gè)元素是獲取元素的寬度和高度，不帶px
2、這兩個(gè)元素是只讀的，不可修改
3、代碼實(shí)例
<!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/javascript">
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、獲取元素的整個(gè)的寬度和高度，包括內(nèi)容區(qū)、內(nèi)邊距和邊框
2、代碼實(shí)例
<!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
* - 獲取元素的整個(gè)的寬度和高度，包括內(nèi)容區(qū)、內(nèi)邊距和邊框
*/
alert(box1.offsetWidth);
};
};
</script>
</head>
<body id="body">
<button id="btn01">親我一下</button>
<br /><br />
<div id="box1"></div>
</body>
</html>3、瀏覽器展示
五、offsetParent
1、獲取當(dāng)前元素的父元素
2、代碼實(shí)例
var op = box1.offsetParent; alert(op.id);
3、瀏覽器展示
六、offsetLeft和offsetTop
1、offsetLeft
當(dāng)前元素相對(duì)于其定位父元素的水平偏移量
2、offsetTop
當(dāng)前元素相對(duì)于其定位父元素的垂直偏移量
七、scrollWidth和scrollHeight
1、scrollWidth
可以獲取元素整個(gè)滾動(dòng)區(qū)域的寬度
2、scrollHeight
可以獲取元素整個(gè)滾動(dòng)區(qū)域的高度
八、scrollLeft和scrollTop
1、scrollLeft
獲取水平滾動(dòng)條滾動(dòng)的距離
2、scrollTop
獲取垂直滾動(dòng)條滾動(dòng)的距離
當(dāng)滿足scrollHeight - scrollTop == clientHeight，說(shuō)明垂直滾動(dòng)條滾動(dòng)到底了。
當(dāng)滿足scrollWidth - scrollLeft == clientWidth，說(shuō)明水平滾動(dòng)條滾動(dòng)到底了。
九、 事件的冒泡
1、 事件的冒泡指的是事件的向上傳遞，當(dāng)后代元素的事件被觸發(fā)時(shí)，其父元素的相同事件也會(huì)被觸發(fā)。
2、可以通過(guò)設(shè)置，取消事件的冒泡
3、代碼實(shí)例
<!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(){
//為云韻綁定一個(gè)單擊響應(yīng)函數(shù)
var yy = document.getElementById("yy");
yy.onclick = function(event){
event = event || window.event;
alert("我是云韻");
//取消冒泡
//可以將事件對(duì)象的cancelBubble設(shè)置為true，即可取消冒泡
//event.cancelBubble = true;
};
//為哪吒綁定一個(gè)單擊響應(yīng)函數(shù)
var nz = document.getElementById("nz");
nz.onclick = function(event){
event = event || window.event;
alert("我是哪吒");
event.cancelBubble = true;
};
//為body綁定一個(gè)單擊響應(yīng)函數(shù)
document.body.onclick = function(){
alert("我是body的單擊響應(yīng)函數(shù)");
};
};
</script>
</head>
<body>
<div id="nz">
我是哪吒
<span id="yy">我是云韻</span>
</div>
</body>
</html>4、瀏覽器展示
總結(jié)
到此這篇關(guān)于JavaScript讀取元素的樣式的文章就介紹到這了,更多相關(guān)JavaScript讀取元素的樣式內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
JavaScript中常用的數(shù)組操作方法總結(jié)
這篇文章為大家總結(jié)了一些JavaScript中常用的數(shù)組操作方法，文中通過(guò)示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-07-07
單擊復(fù)制文字的js找了很久，由于之前沒(méi)有接觸過(guò)，完全不知道兼容ie及標(biāo)準(zhǔn)dom瀏覽器，不僅僅要通過(guò)js，而且需要flash的幫忙，下面與大家分享下具體的實(shí)現(xiàn)方法2013-07-07
ajax中g(shù)et和post的說(shuō)明及使用與區(qū)別
對(duì)付亂碼我都是用過(guò)濾器做字符編碼過(guò)濾的，Get方法過(guò)濾器監(jiān)聽(tīng)不到，所以我一直喜歡使用Post方法，下面對(duì)Ajax Get和Post方法做一對(duì)比,需要了解的朋友可以 參考下2012-12-12
JS實(shí)現(xiàn)鼠標(biāo)移上去顯示圖片或微信二維碼
本文給大家分享一段使用的js代碼實(shí)現(xiàn)鼠標(biāo)移入顯示圖片或微信二維碼樣式，代碼簡(jiǎn)單易懂，非常不錯(cuò)，需要的朋友參考下吧2016-12-12
微信小程序?qū)W習(xí)筆記之文件上傳、下載操作圖文詳解
這篇文章主要介紹了微信小程序?qū)W習(xí)筆記之文件上傳、下載操作,結(jié)合實(shí)例形式分析了微信小程序圖片文件傳輸?shù)脑怼⒉襟E及后臺(tái)php操作相關(guān)實(shí)現(xiàn)技巧,并結(jié)合圖文形式予以詳細(xì)說(shuō)明,需要的朋友可以參考下2019-03-03![file-loader打包圖片文件時(shí)路徑錯(cuò)誤輸出為[object-module]的解決方法](http://img.jbzj.com/images/xgimg/bcimg5.png)
file-loader打包圖片文件時(shí)路徑錯(cuò)誤輸出為[object-module]的解決方法
這篇文章主要介紹了file-loader打包圖片文件時(shí)路徑錯(cuò)誤輸出為[object-module]的解決方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-01-01
微信小程序與h5的相互跳轉(zhuǎn)場(chǎng)景分析
這篇文章主要介紹了微信小程序與h5的相互跳轉(zhuǎn)場(chǎng)景分析,在微信小程序內(nèi)編寫(xiě)webview文件,通過(guò)webview去跳轉(zhuǎn)h5,loadUrl為h5的地址,非嵌套,h5需要跳轉(zhuǎn)打開(kāi)某個(gè)微信小程序,需要的朋友可以參考下2023-10-10
javascript與jquery動(dòng)態(tài)創(chuàng)建html元素示例
這篇文章主要介紹了javascript與jquery動(dòng)態(tài)創(chuàng)建html元素的方法,結(jié)合實(shí)例形式分析了javascript與jQuery動(dòng)態(tài)創(chuàng)建頁(yè)面元素的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2016-07-07
javascript基于原型鏈的繼承及call和apply函數(shù)用法分析
這篇文章主要介紹了javascript基于原型鏈的繼承及call和apply函數(shù)用法,結(jié)合實(shí)例形式較為詳細(xì)的分析了javascript中繼承的概念、創(chuàng)建方法以及call和apply函數(shù)的功能與使用技巧,需要的朋友可以參考下2016-12-12
這篇文章主要介紹了js獲取域名的方法,涉及window.location中常見(jiàn)方法的使用技巧,需要的朋友可以參考下2015-01-01