您好,登錄后才能下訂單哦!
小編給大家分享一下js如何獲取元素的具體樣式信息getcss,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!
如果想獲取元素的某一個(gè)具體的樣式屬性值
1、元素.style.屬性名
需要我們把元素的樣式都寫在行內(nèi)樣式上才可以(寫在樣式表中是不管用的)
console.log(box.style.height) ->null
在真實(shí)項(xiàng)目中,這種方式不常用,因?yàn)椴荒転榱双@取值而把所有的樣式都寫在行內(nèi)(無法實(shí)現(xiàn)html和css的分離)
2、使用window.getComputedStyle(當(dāng)前操作的元素對(duì)象,當(dāng)前元素的偽類【一般我們不用偽類寫null】)這個(gè)方法獲取所有經(jīng)過瀏覽器計(jì)算過的樣式
所有經(jīng)過瀏覽器計(jì)算過的樣式:只要當(dāng)前的元素標(biāo)簽可以在頁面中呈現(xiàn)出來,那么他的所有樣式都是經(jīng)過瀏覽器計(jì)算過的(渲染過的)->哪怕有些樣式你沒有寫,我們也可以獲取到
獲取的結(jié)果是CSSStyleDeclaration這個(gè)類的實(shí)例:包含了當(dāng)前元素的所有樣式屬性和值
console.log(window.getComputedStyle);//function
console.log(window.getComputedStyle(box,null))["height"]
3、方法雖然好用,但是在IE6-8下是不兼容的:因?yàn)閣indow下沒有g(shù)etComputedStyle這個(gè)屬性->會(huì)報(bào)錯(cuò)
在IE6-8下我們可以使用currentStyle來獲取所有經(jīng)過瀏覽器計(jì)算過的樣式
console.log(box.currentStyle)
console.log(box.currentStyle.height)
獲取樣式的兼容寫法getCss:獲取當(dāng)前元素所有經(jīng)過瀏覽器計(jì)算過的樣式中的[attr]對(duì)應(yīng)的值
/* curEle:[object] 當(dāng)前要操作的元素對(duì)象 attr:[string] 我們要獲取的樣式屬性的名稱 1、使用try、catch來處理兼容(只有在不得已的情況下) 前提:必須保證try中的代碼在不兼容的時(shí)候報(bào)錯(cuò),這樣才可以catch捕獲到錯(cuò)誤信息,進(jìn)行其他的處理 不管當(dāng)前的瀏覽器是否支持這個(gè)方法,都需要把try中的代碼執(zhí)行一遍,如果當(dāng)前是IE7,window.getComputedStyle不兼容,但是也需要執(zhí)行一遍再執(zhí)行catch里面的代碼,執(zhí)行了兩遍,消耗性能, 2、判斷當(dāng)前瀏覽器中是否存在這個(gè)屬性或者方法,存在就兼容,不存在就不兼容 3、通過檢測(cè)瀏覽器版本和類型來處理兼容 window.navigator.userAgent 獲取當(dāng)前瀏覽器是IE6-8 */ function getCss(curEle,attr){ var val = null; //方法2 if("window.getComputedStyle" in window){//或者window.getComputedStyle var = window.getComputedStyle(curEle,null)[attr]; }else{ var = curEle.currentStyle[attr]; } //方法1 try{ var = window.getComputedStyle(curEle,null)[attr]; }catch(e){ var = curEle.currentStyle[attr]; } //方法3 if(/MSIE (6|7|8)/.test(navigator.userAgent)){ var = curEle.currentStyle[attr]; }else{ var = window.getComputedStyle(curEle,null)[attr]; } return val; }
console.log(getCss(box,"border")) console.log(getCss(box,"fontFamily"))
標(biāo)準(zhǔn)瀏覽器和IE瀏覽器獲取的結(jié)果還是不一樣的->對(duì)于部分樣式屬性,不同瀏覽器獲取的結(jié)果不一樣,主要是由于getComputedStyle和currentStyle在某些方面不一樣
對(duì)于復(fù)合的樣式值可以拆開來獲取
console.log(getCss(box,"marginTop"))
上面的getCss還沒有寫完,下面進(jìn)行第一次升級(jí):把獲取的樣式值“單位去掉”(只有符合“數(shù)字+單位/數(shù)字”才可以使用parseFloat)
function getCss(curEle,attr){ var val = null; var reg = null; if(/MSIE (6|7|8)/.test(navigator.userAgent)){ var = curEle.currentStyle[attr]; }else{ var = window.getComputedStyle(curEle,null)[attr]; } reg = /^(-?\d+(\.\d+)?)(px|pt|rem|em)?$/i; return reg.test(val)?parseFloat(val):val; //這樣寫肯定不行,對(duì)于某些樣式屬性的值是不能去單位的,例如:float position margin padding border 這些復(fù)合值 background }
第二次升級(jí):有些樣式屬性在不同的瀏覽器中是不兼容的,例如opacity
function getCss(curEle,attr){ var val = null; var reg = null; if(/MSIE (6|7|8)/.test(navigator.userAgent)){ if(attr==="opacity"){ val = curEle.currentStyle["filter"]; //把獲取到的結(jié)果剖析,獲取里面的數(shù)字,讓數(shù)字除以100才和標(biāo)準(zhǔn)瀏覽器保持一致 reg = /^alpha\(opacity=(\d+(?:\.\d+)?)\)$/i; val = reg.test(val)?reg.exec(val)[1]/100:1 }else{ val = curEle.currentStyle[attr]; } }else{ //如果傳遞進(jìn)來的結(jié)果是opacity,說明我想獲得的是透明度,但是在IE6-8下獲取透明度需要使用filter val = window.getComputedStyle(curEle,null)[attr]; } }
在補(bǔ)充一個(gè)小的知識(shí)點(diǎn):偽類
:before :after 在一個(gè)元素便簽的前面或者后面創(chuàng)建一個(gè)新的虛擬標(biāo)簽,我們可以給這個(gè)虛擬標(biāo)簽增加樣式,也可以增加內(nèi)容等...也可以通過偽類來進(jìn)行清除浮動(dòng) 可以通過如下方式獲取 window.getComputedStyle(box,"before").content
JavaScript是一種直譯式的腳本語言,其解釋器被稱為JavaScript引擎,是瀏覽器的一部分,JavaScript是被廣泛用于客戶端的腳本語言,最早是在HTML網(wǎng)頁上使用,用來給HTML網(wǎng)頁增加動(dòng)態(tài)功能。
以上是“js如何獲取元素的具體樣式信息getcss”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對(duì)大家有所幫助,如果還想學(xué)習(xí)更多知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。