js怎么獲取css設置的樣式

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

我們提供的服務有：網(wǎng)站制作、網(wǎng)站設計、微信公眾號開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認證、永康ssl等。為上千家企事業(yè)單位解決了網(wǎng)站和推廣的問題。提供周到的售前咨詢和貼心的售后服務，是有科學管理、有技術(shù)的永康網(wǎng)站制作公司

DOM標準里有個全局方法getComputedStyle，可以獲取到當前對象樣式規(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樣式里的background屬性值呢？

ss文件中如何得到某個屬性值：

一、getComputedStyle是一個可以獲取當前元素所有最終使用的CSS屬性值，

返回的是一個CSS樣式聲明對象 ， 只讀， 此方法支持Firefox瀏覽器;

語法：var style=window.getComputedStyle(“元素”，“偽類”);第一個參數(shù)是必須的，第二個為可選的。

二、currentStyle 是一款可以兼容IE瀏覽器的屬性返回的是當前所有最終使用的CSS屬性值，

利用element.CurrentStyle.attribute可獲取

其與getComputedStyle區(qū)別：1、 currentStyle不支持偽類樣式獲取；

2、currentStyle不支持現(xiàn)代瀏覽器，支持IE

代碼說明：

[html] view plain copy

span style="font-size:14px;"!DOCTYPE html

html

head

meta charset="utf-8"

title/title

/head

style type="text/css"

#div1{

width:100px;height:100px;background: red;

}

/style

body

div id="div1"/div

/body

script type="text/javascript"

var oDiv = document.getElementById('div1');

/*

只能獲取，不能設置

獲取到的是計算后的樣式

最好不要獲取復合樣式

所獲取的樣式要設初使值

獲取到的樣式類型是字符串

別空格 [' width']

*獲取到的樣式帶px的

transform 獲取不到

transition 不準確

*/

function getStyle(obj,attr){

if(obj.currentStyle){ //IE

return obj.currentStyle[attr];

}else{

return getComputedStyle(obj,"偽類")[attr]; //Firefox

}

}

alert(getStyle(oDiv1,'background'));/html/span

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

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

|-5| = 5

這三個函數(shù)都是 數(shù)學函數(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)嵌式 或者 外鏈式 。

怎么辦？

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

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

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

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

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

千萬要記得 每個 的意思 ： 那是相當重要

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

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

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

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

案例源碼：

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

案例源碼：

鏈接：

密碼：7fv8

JS修改CSS設置的樣式

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

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

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

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

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

語法：元素.style.樣式名

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

語法:元素.currentStyle.樣式名

如果當前元素沒有設置該樣式，則獲取它的默認值

例如： box1.currentStyle.width

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

第一個:要獲取樣式的元素

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

該方法會返回一個對象，對象中封裝了當前元素對應的樣式

可以通過對象﹒樣式名來讀取樣式

如果獲取的 樣式?jīng)]有設置 ，則會獲取到真實的值，而不是默認值

比如:沒有設置width，它不會獲取到auto，而是 一個長度

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

參數(shù)：

obj 要獲取樣式的元素

name 要獲取的樣式名