用document.getElementById(‘element’).style.xxx可以獲取元素的樣式信息，可是它獲取的只是DOM元素style屬性里的樣式規(guī)則，對(duì)于通過class屬性引用的外部樣式表，就拿不到我們要的信息了。
我們提供的服務(wù)有：網(wǎng)站制作、網(wǎng)站設(shè)計(jì)、微信公眾號(hào)開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、永康ssl等。為上千家企事業(yè)單位解決了網(wǎng)站和推廣的問題。提供周到的售前咨詢和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的永康網(wǎng)站制作公司
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;
ss文件中如何得到某個(gè)屬性值：
一、getComputedStyle是一個(gè)可以獲取當(dāng)前元素所有最終使用的CSS屬性值，
返回的是一個(gè)CSS樣式聲明對(duì)象 ， 只讀， 此方法支持Firefox瀏覽器;
語法：var style=window.getComputedStyle(“元素”，“偽類”);第一個(gè)參數(shù)是必須的，第二個(gè)為可選的。
二、currentStyle 是一款可以兼容IE瀏覽器的屬性返回的是當(dāng)前所有最終使用的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');
/*
只能獲取，不能設(shè)置
獲取到的是計(jì)算后的樣式
最好不要獲取復(fù)合樣式
所獲取的樣式要設(shè)初使值
獲取到的樣式類型是字符串
別空格 [' width']
*獲取到的樣式帶px的
transform 獲取不到
transition 不準(zhǔn)確
*/
function getStyle(obj,attr){
if(obj.currentStyle){ //IE
return obj.currentStyle[attr];
}else{
return getComputedStyle(obj,"偽類")[attr]; //Firefox
}
}
alert(getStyle(oDiv1,'background'));/html/span
盒子 原來的位置 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
語法：元素.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 要獲取的樣式名
重慶分公司
重慶分公司
