如何javascript獲取css中的樣式

一、獲取元素的行內(nèi)樣式

網(wǎng)站建設(shè)哪家好，找創(chuàng)新互聯(lián)公司！專注于網(wǎng)頁設(shè)計、網(wǎng)站建設(shè)、微信開發(fā)、小程序制作、集團企業(yè)網(wǎng)站建設(shè)等服務(wù)項目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了無棣免費建站歡迎大家使用！

var obj = document.getElementById("test");

alert(obj.height + "\n" + obj.width); // 200px 200px typeof=string只是將style屬性中的值顯示出來

二、獲取計算后的樣式

var obj = document.getElementById("test");

var style = null;

if (window.getComputedStyle) {

style = window.getComputedStyle(obj, null); // 非IE

} else {

style = obj.currentStyle; // IE

}

alert("width=" + style.width + "\nheight=" + style.height);

注意：如果不設(shè)置元素的寬度和高度，那么在非IE瀏覽器下返回默認(rèn)的寬度和高度。在IE下面返回auto字符串

三、獲取link和style標(biāo)簽寫入的樣式

var obj = document.styleSheets[0]; // [object StyleSheetList] 樣式表的個數(shù)linkvar rule = null;// [object CSSRule]

if (obj.cssRules){

rule = obj.cssRules[0]; // 非IE [object CSSRuleList]

} else {

rule = obj.rules[0]; // IE [object CSSRuleList]

}

alert(rule.style.width);

cssRules(或rules)只能獲取到內(nèi)聯(lián)和鏈接樣式的寬和高，不能獲取到行內(nèi)和計算后的樣式。

總結(jié)：

以上的三種CSS獲取元素大小的方法，只能獲取元素的CSS大小，卻無法獲取元素本身實際的大小。比如加上了內(nèi)邊距、滾動條、邊框之類的。

js怎么獲取css設(shè)置的樣式

用document.getElementById(‘element’).style.xxx可以獲取元素的樣式信息，可是它獲取的只是DOM元素style屬性里的樣式規(guī)則，對于通過class屬性引用的外部樣式表，就拿不到我們要的信息了。

DOM標(biāo)準(zhǔn)里有個全局方法getComputedStyle，可以獲取到當(dāng)前對象樣式規(guī)則信息，如：getComputedStyle(obj,null).paddingLeft，就能獲取到對象的左內(nèi)邊距。但是IE不支持此方法，它有自己的一個實現(xiàn)方式，那就是currentStyle，不同于全局方法getComputedStyle，它是作為DOM元素屬性存在的，如：obj.currentStyle.paddingLeft，在IE中就獲取到對象的左內(nèi)邊距了，兼容性的寫法如下：

return window.getComputedStyle ? window.getComputedStyle(obj,null).paddingLeft : obj.currentStyle.paddingLeft;

前端基本功：JS（十一）動畫封裝(CSS樣式獲取、JSON遍歷)

盒子 原來的位置 0 + 10 盒子現(xiàn)在的offsetLeft 10

|-5| = 5

這三個函數(shù)都是 數(shù)學(xué)函數(shù)

Math

比如說 console.log(Math.ceil(1.01)) 結(jié)果 是 2

console.log(Math.ceil(1.9)) 結(jié)果 2

console.log(Math.ceil(-1.3)) 結(jié)果 是 -1

比如說 console.log(Math.floor(1.01)) 結(jié)果 是 1

console.log(Math.floor(1.9)) 結(jié)果 1

console.log(Math.floor(-1.3)) 結(jié)果 是 -2

console.log(Math.round(1.01)) 結(jié)果 是 1

console.log(Math.round(1.9)) 結(jié)果 是 2

勻速動畫的原理： 盒子本身的位置 + 步長

緩動動畫的原理: 盒子本身的位置 + 步長 (不斷變化的)

( 缺陷：只能水平方向！隨后的“封裝運動框架單個屬性會進一步改進” )

我們訪問得到css 屬性，比較常用的有兩種：

點語法可以得到 width 屬性 和 top屬性 ** 帶有單位的 。 100px

但是這個語法有非常大的 缺陷**， 不變的。

后面的width 和 top 沒有辦法傳遞參數(shù)的。

var w = width;

box.style.w

最大的優(yōu)點 ： 可以給屬性傳遞參數(shù)

我們想要獲得css 的樣式， box.style.left 和 box.style.backgorundColor

但是它只能得到 行內(nèi)的樣式。

但是我們工作最多用的是 內(nèi)嵌式 或者 外鏈?zhǔn)?。

怎么辦？

核心： 我們怎么才能得到內(nèi)嵌或者外鏈的樣式呢？

外部（使用link）和內(nèi)嵌（使用style）樣式表中的樣式（ie和opera）

兩個選項是必須的， 沒有偽類 用 null 替代

我們這個元素里面的屬性很多， left top width ===

我們想要某個屬性， 就應(yīng)該 返回該屬性，所有繼續(xù)封裝 返回當(dāng)前樣式的 函數(shù)。

千萬要記得 每個 的意思 ： 那是相當(dāng)重要

flag在js中一般作為開關(guān)，進行判斷。

等動畫執(zhí)行完畢再去執(zhí)行的函數(shù) 回調(diào)函數(shù)

我們怎么知道動畫就執(zhí)行完畢了呢？

很簡單 當(dāng)定時器停止了。 動畫就結(jié)束了

案例源碼：

in運算符也是一個二元運算符，但是對運算符左右兩個操作數(shù)的要求比較嚴(yán)格。in運算符要求第1個（左邊的）操作數(shù)必須是字符串類型或可以轉(zhuǎn)換為字符串類型的其他類型，而第2個（右邊的）操作數(shù)必須是數(shù)組或?qū)ο?。只有?個操作數(shù)的值是第2個操作數(shù)的屬性名，才會返回true，否則返回false

案例源碼：

鏈接：

密碼：7fv8

原生JS獲取及設(shè)置CSS樣式-1.行內(nèi)樣式

面試中，應(yīng)該會經(jīng)常被問到樣式的寫法以及如何使用原生JS獲取及操作樣式的問題吧，讓我給大家總結(jié)一下~

HTML + 行內(nèi)樣式

JS

嘿嘿~

解析js如何獲取css樣式

一、獲取內(nèi)聯(lián)樣式

div

id

="myDiv"

style="width:100px;height:100px;background-color:red;

border:1px

solid

black;"/div

script

var

myDiv

=

document.getElementById("myDiv");

alert(myDiv.style.width);//100px

alert(myDiv.style['height']);//100px

var

style=myDiv.style;

alert(style.backgroundColor);//red

myDiv.style.backgroundColor='green';//myDiv背景色變?yōu)榫G色

/script

在這種情況下，獲取和設(shè)置樣式只靠style屬性就可以，因為element.style屬性返回的是類似數(shù)組的一組樣式屬性及對應(yīng)值，因此訪問具體樣式的時候可以采取兩種方式即“ele.style.屬性名稱”和“ele.style['屬性名稱']”。但是，要注意的是，針對css樣式里background-color;margin-left之類的短杠相接的屬性名稱，在使用style屬性獲取設(shè)置樣式的時候名稱要改為駝峰式，如ele.style.backgroundColor.

二、因為第一種方法，即使用style屬性只能獲取到內(nèi)聯(lián)樣式。但是，實際情況是文檔在現(xiàn)在都基本遵循分離思想，樣式基本都是外部鏈接，所以三種樣式都要考慮到的，這時就要使用其他方法進行獲取，而在這種情況下進行樣式獲取時，不同的瀏覽器又有不同的處理方式（主要是ie和非ie），因此根據(jù)瀏覽器可以分為兩種方式：

（2.1）非ie瀏覽器中，使用document.defaultView對象的getComputedStyle(ele，null/偽類)方法，該方法接受兩個參數(shù)，第一個為要考察的元素，第二個則要根據(jù)情況，如果只是考察元素本身則為null，如果要

考察偽類，則為響應(yīng)的偽類。該方法獲取到的為元素應(yīng)用的最終樣式組合，同樣是類似數(shù)組的一個實例。

（2.2）在ie瀏覽器中，對getComputedStyle()方法不支持，但是針對每個標(biāo)簽元素都有一個近似于style屬性的currentStyle的屬性，且用法和style用法相同。只不過獲取到的樣式范圍不一樣。currenStyle獲取到的和getComputedStyle（）方法相接近。

為了在處理時達到兼容，可以根據(jù)這兩種不同的處理方式創(chuàng)建一個函數(shù)來達到兼容目的，使得不管在那種瀏覽器中，都可以成功獲取樣式。如下所示：

style

type="text/css"

#myDiv

{

background-color:blue;

width:100px;

height:200px;

}

/style

div

id

="myDiv"

style="background-color:red;

border:1px

solid

black;"/div

script

var

myDiv

=

document.getElementById("myDiv");

var

finalStyle

=

myDiv.currentStyle

?

myDiv.currentStyle

:

document.defaultView.getComputedStyle(myDiv,

null);/*利用判斷是否支持currentStyle（是否為ie）

來通過不同方法獲取style*/

alert(finalStyle.backgroundColor);

//"red"

alert(finalStyle.width);

//"100px"

alert(finalStyle.height);

//"200px"

/script

以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時也希望多多支持腳本之家！

求獲取css樣式的js正則表達式

var?testContent?=?'.class1{?color:red?}.class2??{?????color:blue?}';

function?getCss(className){

var?reStr?=?'\.'?+?className?+?'[?\s]*\{[^\}]+?\}';

var?re?=?new?RegExp(reStr,?"gi");

return?testContent.match(re);

}

alert(getCss('class1'));

alert(getCss('class2'));

新聞名稱：取得css樣式,css樣式菜鳥教程
轉(zhuǎn)載來源：http://m.rwnh.cn/article16/phjhdg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站策劃、搜索引擎優(yōu)化、做網(wǎng)站、域名注冊、面包屑導(dǎo)航、動態(tài)網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)