教你如何通過JavaScript讀取元素的樣式
一、getComputedStyle()
1、getComputedStyle()是window的方法,可以獲取元素當前的樣式
Window.getComputedStyle()方法返回一個對象,該對象在應用活動樣式表并解析這些值可能包含的任何基本計算后報告元素的所有CSS屬性的值。 私有的CSS屬性值可以通過對象提供的API或通過簡單地使用CSS屬性名稱進行索引來訪問。
let style = window.getComputedStyle(element, [pseudoElt]);
2、兩個參數(shù)
要獲取樣式的元素
可以傳遞一個偽元素,一般都傳null
該方法會返回一個對象,對象中封裝了當前元素對應的樣式,可以通過對象樣式名來讀取樣式,如果獲取的樣式?jīng)]有設置,則會獲取到真實的值,而不是默認值。
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/javascript"> 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/javascript"> window.onload = function(){ //點擊按鈕以后讀取box1的樣式 var box1 = document.getElementById("box1"); var btn01 = document.getElementById("btn01"); btn01.onclick = function(){ // 定義一個函數(shù),用來獲取指定元素的當前的樣式 var ret = getBoxStyle(box1,"width"); alert(ret); }; }; /* * 參數(shù): * 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> <button 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/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、獲取元素的整個的寬度和高度,包括內容區(qū)、內邊距和邊框
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 * - 獲取元素的整個的寬度和高度,包括內容區(qū)、內邊距和邊框 */ 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
可以獲取元素整個滾動區(qū)域的寬度
2、scrollHeight
可以獲取元素整個滾動區(qū)域的高度
八、scrollLeft和scrollTop
1、scrollLeft
獲取水平滾動條滾動的距離
2、scrollTop
獲取垂直滾動條滾動的距離
當滿足scrollHeight - scrollTop == clientHeight,說明垂直滾動條滾動到底了。
當滿足scrollWidth - scrollLeft == clientWidth,說明水平滾動條滾動到底了。
九、 事件的冒泡
1、 事件的冒泡指的是事件的向上傳遞,當后代元素的事件被觸發(fā)時,其父元素的相同事件也會被觸發(fā)。
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(){ //為云韻綁定一個單擊響應函數(shù) var yy = document.getElementById("yy"); yy.onclick = function(event){ event = event || window.event; alert("我是云韻"); //取消冒泡 //可以將事件對象的cancelBubble設置為true,即可取消冒泡 //event.cancelBubble = true; }; //為哪吒綁定一個單擊響應函數(shù) var nz = document.getElementById("nz"); nz.onclick = function(event){ event = event || window.event; alert("我是哪吒"); event.cancelBubble = true; }; //為body綁定一個單擊響應函數(shù) document.body.onclick = function(){ alert("我是body的單擊響應函數(shù)"); }; }; </script> </head> <body> <div id="nz"> 我是哪吒 <span id="yy">我是云韻</span> </div> </body> </html>
4、瀏覽器展示
總結
到此這篇關于JavaScript讀取元素的樣式的文章就介紹到這了,更多相關JavaScript讀取元素的樣式內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
JS使用ajax從xml文件動態(tài)獲取數(shù)據(jù)顯示的方法
這篇文章主要介紹了JS使用ajax從xml文件動態(tài)獲取數(shù)據(jù)顯示的方法,實例分析了javascript使用Ajax技術操作XML文件的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-03-03ES6初步了解原始數(shù)據(jù)類型Symbol的用法
ES6中為我們新增了一個原始數(shù)據(jù)類型Symbol,大家是否知道Symbol可以作用在哪?用來定義對象的私有變量如何寫入對象,本文對ES6 Symbol的用法介紹的非常詳細,需要的朋友參考下吧2023-10-10javascript+css3 實現(xiàn)動態(tài)按鈕菜單特效
這篇文章主要介紹了javascript+css3 實現(xiàn)動態(tài)按鈕菜單特效的相關資料,需要的朋友可以參考下2016-02-02JavaScript實現(xiàn)url地址自動檢測并添加URL鏈接示例代碼
寫一個簡單的聊天系統(tǒng),發(fā)出Htpp的Url實現(xiàn)跳轉加上a標簽,下面是具體的實現(xiàn),感興趣的朋友不要錯過2013-11-11javascript實現(xiàn)的淘寶旅行通用日歷組件用法實例
這篇文章主要介紹了javascript實現(xiàn)的淘寶旅行通用日歷組件,以實例形式分析了該日歷組件的相關設置及使用技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-08-08