規(guī)范

<style type="text/css"></style> <script type="text/javascript"></script>

讀寫(xiě)樣式屬性

.style是訪問(wèn)不到css樣式表的，只能訪問(wèn)到行內(nèi)/內(nèi)聯(lián)的屬性，當(dāng)未設(shè)置行內(nèi)屬性時(shí)，結(jié)果為空字符串

設(shè)置時(shí)，對(duì)復(fù)合值需要拆解賦值，不拆解效率更低

oDiv.style.weight='200px'; oDiv.style.border='5px solid #000'; // 更合適的寫(xiě)法如下，拆解 oDiv.style.borderWidth='5px'; oDiv.style.borderStyle='solid'; oDiv.style.borderColor='#000';

設(shè)置float要寫(xiě)成cssFloat(雖然設(shè)置float也有效果但是不規(guī)范，float是css中的保留字，也有浮點(diǎn)的含義)

查看元素css屬性

1. 元素.style

對(duì)于不同的盒子模型是什么

當(dāng)給元素設(shè)置了行內(nèi)樣式時(shí)

當(dāng)元素未設(shè)置內(nèi)聯(lián)樣式時(shí)

2. window.getComputedStyle(elem,null)

• 查看計(jì)算樣式
• 返回值是類(lèi)數(shù)組
• 屬性是只讀的
• 是絕對(duì)值（非數(shù)學(xué)意義上的絕對(duì)值）：em、rem轉(zhuǎn)換為px，十六進(jìn)制轉(zhuǎn)換為rgb
• IE8及以下不支持

Failed to set the ‘background’ property on ‘CSSStyleDeclaration’: These styles are computed, and therefore the ‘background’ property is read-only.
at HTMLDivElement.oDiv.onclick

• 獲取元素行內(nèi)、css樣式表

• .style和getComputedStyle的區(qū)別
  
  

• IE8支持elem.currentStyle

• 該方法獲取到的height是否是盒子的實(shí)際高度，是由盒子模型決定的

• 【兼容】

function getStyles(elem, prop) {if (window.getComputedStyle) {if (prop) {return window.getComputedStyle(elem, null)[prop];} else {return window.getComputedStyle(elem, null);}} else {if (prop) {return elem.currentStyle[prop];} else {return elem.currentStyle;}} }

3.offsetWidth/offsetHeight

• 訪問(wèn)元素的實(shí)際寬高
• 包含元素的padding、border（box-sizing為content-box時(shí)）
• 會(huì)在元素渲染后訪問(wèn)（即使設(shè)置的是css樣式表也能）
• box-sizing為content-box時(shí)，長(zhǎng)大的速度更快，因?yàn)槭冀K獲得都是真實(shí)寬高，起始的基數(shù)不一樣
  

• 在js運(yùn)動(dòng)中的問(wèn)題，如果設(shè)置的是css樣式表 box-sizing為content-box時(shí)
  
  
• 使用box-sizing:border-box;，初始的盒子變小了
  
• box-sizing為content-box時(shí)
  

操作偽元素

• 操作偽元素最好的方法就是使用類(lèi)名控制
  
• window.getComputedStyle(elem,null)第二個(gè)參數(shù)傳值可以獲取after元素的只讀屬性
  

下拉選組件動(dòng)畫(huà)

• 要點(diǎn)，每次觸發(fā)時(shí)需要先清空定時(shí)器，否則出現(xiàn)抖動(dòng)（當(dāng)mouseenter時(shí)未完全展開(kāi)就mouseleave，enter的定時(shí)器還在執(zhí)行，就開(kāi)始了leave的定時(shí)器）
  

總結(jié)

以上是生活随笔為你收集整理的DOM-6 【兼容】读写样式属性、操作伪元素、运动元素初探的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。