獲取元素css值

Gemini 發(fā)布于2019-08-29 11:02 / 3254人閱讀

摘要：所以為了兼容性考慮我們可以封裝一下最后第一次寫文章可能不怎么樣，望大神們輕拍自轉(zhuǎn)行來(lái)現(xiàn)在公司已有幾個(gè)月了，公司就我一個(gè)前端，工作也比較少，好多基礎(chǔ)東西不寫項(xiàng)目都要忘了，接下來(lái)要自己寫點(diǎn)東西好好回憶鞏固一下了。

最近寫東西碰到一個(gè)問題，通過(guò)document.getElementById(id).style.XXX無(wú)法獲取到樣式值？查完資料才發(fā)現(xiàn)方法只能獲取元素的內(nèi)聯(lián)樣式，那要獲取內(nèi)部樣式或外部樣式該怎么辦？

getComputedStyle

原來(lái)獲取外部樣式或內(nèi)部樣式用的是window.getComputedStyle方法，用法如下：




    
    getComputedStyle

這種方法可以很好的在Chrome、Firefox、Opera、Safari、IE9+運(yùn)行，但在IE8及以下的瀏覽器就不行了，原來(lái)在IE6-IE8有自己的方法：element.currentStyle。所以為了兼容性考慮我們可以封裝一下：

function getStyle (obj, sName){
    return (obj.currentStyle || window.getComputedStyle(obj, false))[sName];
}

最后

第一次寫文章可能不怎么樣，望大神們輕拍......
自轉(zhuǎn)行來(lái)現(xiàn)在公司已有幾個(gè)月了，公司就我一個(gè)前端，工作也比較少，好多基礎(chǔ)東西不寫項(xiàng)目都要忘了，接下來(lái)要自己寫點(diǎn)東西好好回憶鞏固一下了。

云服務(wù)器 GPU云服務(wù)器獲取元素值獲取CSS屬性值 js獲取HTML元素值 php 獲取css值

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/111376.html

相關(guān)文章

jQuery 屬性與樣式

摘要：與中用方法來(lái)獲取和設(shè)置元素屬性是屬性的縮寫，在操作中會(huì)經(jīng)常用到有個(gè)表達(dá)式傳入屬性名獲取屬性的值屬性名屬性值設(shè)置屬性的值屬性名函數(shù)值設(shè)置屬性的函數(shù)值給指定元素設(shè)置多個(gè)屬性值，即屬性名一屬性值一屬性名二屬性值二刪除方法為匹配的元素集合中的每個(gè)元 .attr()與.removeAttr() jQuery中用attr()方法來(lái)獲取和設(shè)置元素屬性,attr是attribute（屬性）的縮寫，在j...

yibinnn 2019-08-21 11:52 評(píng)論0 收藏0
jQuery入門筆記之（一）選擇器引擎

摘要：選擇器，若未作特別說(shuō)明，獲取的都是元素集合。過(guò)濾器名語(yǔ)法說(shuō)明選取所有不可見元素選取所有可見元素注意過(guò)濾器一般是包含的內(nèi)容為樣式為表單類型為和的元素。四子元素過(guò)濾器子元素過(guò)濾器的過(guò)濾規(guī)則是通過(guò)父元素和子元素的關(guān)系來(lái)獲取相應(yīng)的元素。轉(zhuǎn)自個(gè)人博客本來(lái)是單獨(dú)整理了一個(gè)CSS選擇器的，但是在jQuery中基本都有對(duì)應(yīng)的，所以就不發(fā)了。 jQuery選擇器，若未作特別說(shuō)明，獲取的都是元素集合。...

charles_paul 2019-08-19 17:17 評(píng)論0 收藏0
常用JavaScript操作CSS方法總結(jié)

摘要：返回值一個(gè)對(duì)象集合，包含六個(gè)屬性上下左右寬高注意只用于行內(nèi)元素只能獲取樣式只讀獲取元素位置獲得頁(yè)面中某個(gè)元素的左，上，右和下分別相對(duì)瀏覽器視窗的位置。返回一個(gè)類數(shù)組對(duì)象，其包含樣式表中所有規(guī)則。 [TOC] 獲取樣式元素對(duì)象的寬高位置距離等屬性如offsetWidht、cilentWidht、scrollWidth…… let oWidth=obj.offsetWidth; 注意...

enali 2019-08-21 18:19 評(píng)論0 收藏0
jQuery入門筆記之（二）文檔對(duì)象模型

摘要：刪除指定的屬性，這個(gè)方法就不可以使用匿名函數(shù)，傳遞和均無(wú)效。遍歷對(duì)象數(shù)組索引，鍵，屬性名屬性值，值相當(dāng)于遍歷原生對(duì)象數(shù)組時(shí)，為元素。在使用使用時(shí)，可以使用傳入匿名函數(shù)的方法，實(shí)現(xiàn)由默認(rèn)到幾個(gè)之間的切換。轉(zhuǎn)自個(gè)人博客基礎(chǔ) DOM 和和 CSS 一. 設(shè)置元素及內(nèi)容我們通過(guò)前面所學(xué)習(xí)的各種選擇器、過(guò)濾器來(lái)得到我們想要操作的元素。這個(gè)時(shí)候，我們就可以對(duì)這些元素進(jìn)行 DOM 的操作。...

FleyX 2019-08-19 17:17 評(píng)論0 收藏0
我們來(lái)翻翻元素樣式的族譜-getComputedStyle

摘要：大家應(yīng)該非常熟悉的方法那么如何在不引用的情況下同樣實(shí)現(xiàn)這個(gè)功能呢本文就介紹使用原生來(lái)獲取樣式的方法作者原文鏈接我們來(lái)翻翻元素樣式的族譜是什么方法可以獲取當(dāng)前元素所有最終使用的屬性值返回的是一個(gè)樣式聲明對(duì)象只讀也就是說(shuō)獲取到的不僅僅是我們自大家應(yīng)該非常熟悉jQuery的css()方法,那么如何在不引用jQuery的情況下同樣實(shí)現(xiàn)這個(gè)功能呢?本文就介紹使用原生JS來(lái)獲取樣式的方法. 作者...

graf 2019-08-20 14:02 評(píng)論0 收藏0
我們來(lái)翻翻元素樣式的族譜-getComputedStyle

摘要：大家應(yīng)該非常熟悉的方法那么如何在不引用的情況下同樣實(shí)現(xiàn)這個(gè)功能呢本文就介紹使用原生來(lái)獲取樣式的方法作者原文鏈接我們來(lái)翻翻元素樣式的族譜是什么方法可以獲取當(dāng)前元素所有最終使用的屬性值返回的是一個(gè)樣式聲明對(duì)象只讀也就是說(shuō)獲取到的不僅僅是我們自大家應(yīng)該非常熟悉jQuery的css()方法,那么如何在不引用jQuery的情況下同樣實(shí)現(xiàn)這個(gè)功能呢?本文就介紹使用原生JS來(lái)獲取樣式的方法. 作者...

shengguo 2019-08-30 15:52 評(píng)論0 收藏0