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

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

創(chuàng)新互聯(lián)建站-企業(yè)級(jí)云服務(wù)器提供商,為用戶提供云服務(wù)器、CDN、云安全服務(wù)、成都服務(wù)器托管、服務(wù)器租用、高防主機(jī)等全方位云服務(wù)與各行業(yè)解決方案,幫助企業(yè)及個(gè)人極速備案，輕松上云，安全無憂。

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

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

JS修改CSS設(shè)置的樣式

語法：元素.style.樣式名=樣式值

注意：如果CSS的樣式名中含有-，這種名稱在JS中是不合法的，比如 background-color 。需要將這種樣式名修改為駝峰命名法：去掉-，然后將-后的第一個(gè)字母大寫，比如 backgroundColor

我們通過style屬性設(shè)置的樣式都是內(nèi)聯(lián)樣式，而內(nèi)聯(lián)樣式有較高的優(yōu)先級(jí)，所以通過JS修改的樣式往往會(huì)立即顯示

但是如果在樣式中寫了!important，則此時(shí)樣式會(huì)有最高的優(yōu)先級(jí)，即使通過JS也不能覆蓋該樣式，此時(shí)將會(huì)導(dǎo)致JS修改樣式失效

所以盡量不要為樣式添加!important

語法：元素.style.樣式名

通過style屬性設(shè)置和讀取的都是內(nèi)聯(lián)樣式，無法讀取樣式表中的樣式

語法:元素.currentStyle.樣式名

如果當(dāng)前元素沒有設(shè)置該樣式，則獲取它的默認(rèn)值

例如： box1.currentStyle.width

這個(gè)方法是window的方法，可以直接使用需要兩個(gè)參數(shù)

第一個(gè):要獲取樣式的元素

第二個(gè):可以傳遞一個(gè)偽元素，一般都傳null

該方法會(huì)返回一個(gè)對(duì)象，對(duì)象中封裝了當(dāng)前元素對(duì)應(yīng)的樣式

可以通過對(duì)象﹒樣式名來讀取樣式

如果獲取的 樣式?jīng)]有設(shè)置 ，則會(huì)獲取到真實(shí)的值，而不是默認(rèn)值

比如:沒有設(shè)置width，它不會(huì)獲取到auto，而是 一個(gè)長(zhǎng)度

注意：通過currentStyle和getComputedstyle()讀取到的樣式都是只讀的，不能修改,如果要修改必須通過style屬性

參數(shù)：

obj 要獲取樣式的元素

name 要獲取的樣式名

js 乾坤獲取不到子應(yīng)用public的css

先獲取元素style屬性中的CSS樣式

getComputedStyle 是一個(gè)可以獲取當(dāng)前元素所有最終使用的CSS屬性值。返回的是一個(gè)CSS樣式聲明對(duì)象（objectCSSStyleDeclaration） getComputedStyle 方法獲取的是最終應(yīng)用在元素上的所有CSS屬性對(duì)象（包括默認(rèn)），而element.style只能獲取元素style屬性中的CSS樣式。

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

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

|-5| = 5

這三個(gè)函數(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

勻速動(dòng)畫的原理： 盒子本身的位置 + 步長(zhǎng)

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

( 缺陷：只能水平方向！隨后的“封裝運(yùn)動(dòng)框架單個(gè)屬性會(huì)進(jìn)一步改進(jìn)” )

我們?cè)L問得到css 屬性，比較常用的有兩種：

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

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

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

var w = width;

box.style.w

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

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

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

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

怎么辦？

核心： 我們?cè)趺床拍艿玫絻?nèi)嵌或者外鏈的樣式呢？

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

兩個(gè)選項(xiàng)是必須的， 沒有偽類 用 null 替代

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

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

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

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

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

我們?cè)趺粗绖?dòng)畫就執(zhí)行完畢了呢？

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

案例源碼：

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

案例源碼：

鏈接：

密碼：7fv8