摘要：返回值一個對象集合，包含六個屬性上下左右寬高注意只用于行內(nèi)元素只能獲取樣式只讀獲取元素位置獲得頁面中某個元素的左，上，右和下分別相對瀏覽器視窗的位置。返回一個類數(shù)組對象，其包含樣式表中所有規(guī)則。

[TOC]

如offsetWidht、cilentWidht、scrollWidth……

let oWidth=obj.offsetWidth;

注意：

只能獲取屬性值（只讀）

（這些寬高距離的）值是數(shù)字

獲取所有樣式（樣式的內(nèi)容，字符串形式）cssText 和獲取單項樣式：

let oStyle=obj.style.cssText;
let oWidth=obj.style.width;

注意：

需要用屬性名cssFloat代替float（float是JavaScript保留關鍵字）

取得的屬性值帶有單位（如果有單位）

只能獲取行內(nèi)樣式（html標簽中的樣式）

可以獲取和設置（可讀可寫）

獲取當前元素所有最終使用的CSS屬性值，該方法屬于window對象。 ie8-使用 getCurrentStyle（元素對象的方法）

接收兩個參數(shù)：元素對象和要匹配的偽元素的字符串（普通元素省略或null）

返回一個對象，可用使用該返回對象的屬性和方法獲取樣式：

通過屬性名獲取相應屬性值

let oColor=window.getComputedStyle(obj, null).color;

getPropertyCSSValue()方法獲取CSSValue對象的屬性

接收一個參數(shù)：屬性名（帶引號，原帶-的CSS屬性要轉(zhuǎn)換成駝峰法書寫）

返回一個給定屬性值的CSSValue對象，該對象有3個屬性：primitiveType、cssText和cssValueType，

let oStyle=window.getComputedStyle(obj,null).getPropertyCSSValue("color").cssText;

getPropertyValue()方法

可以獲取CSS樣式申明對象上的屬性值（直接屬性名稱）
接收一個參數(shù)：屬性名（帶引號，原帶-的CSS屬性要轉(zhuǎn)換成駝峰法書寫）

let oBgc=window.getComputedStyle(obj, null).getPropertyValue("background-color");

注意：

全局對象的方法

只能獲取樣式（只讀）

能獲取默認、繼承的屬性

返回的值帶有單位（如果有）

獲取最終樣式值

元素對象的方法。

getClientRects() 獲取元素矩形區(qū)域樣式

獲取元素占據(jù)頁面的所有矩形區(qū)域樣式。返回值一個TextRectangle對象集合，包含：top left bottom right width height 六個屬性（上下左右寬高）

注意：

只用于行內(nèi)元素

只能獲取樣式（只讀）

let rectCollection = obj.getClientRects();

getBoundingClientRect()獲取元素位置

獲得頁面中某個元素的左，上，右和下分別相對瀏覽器視窗的位置。

返回值一個對象，具有6個屬性：top,lef,right,bottom,width,height。

注意：

獲取的位置是元素相對于的視口的位置

right是指元素右邊界距窗口最左邊的距離，bottom是指元素下邊界距窗口最上面的距離。

只能獲取樣式（只讀）

let eleInfo= obj.getBoundingClientRect();

document.styleSheets返回StyleSheetList是一個類數(shù)組對象，包含了當前文檔的所有css樣式表。

cssRules 返回一個類數(shù)組對象cssRuleList，其包含樣式表中所有CSS規(guī)則。

cssRules數(shù)組對象內(nèi)元素的常用屬性（屬性均為只讀，屬性值均是字符串）：

cssText 返回css樣式

style.cssText 返回該條規(guī)則的所有樣式聲明

style.[attr] 返回具體某個屬性的樣式

selectorText 返回該條規(guī)則的選擇器

parentRule 返回包含規(guī)則（如果有）（例如 @media 塊中的樣式規(guī)則）

document.styleSheets; //當前文檔所有css樣式表的類數(shù)組對象
document.styleSheets.lenth; //當前文檔有多少樣式表
document.styleSheets[0]; //當前文檔第0個樣式表的類數(shù)組對象
document.styleSheets[0].cssRules[0]; //當前文檔第0個樣式表的第0條樣式

document.styleSheets[0].cssRules.length; //當前樣式表有多少條樣式
document.styleSheets[0].cssRules[0].cssText; //第0條樣式的內(nèi)容
document.styleSheets[0].cssRules[0].style.width; //第0條樣式中的寬
document.styleSheets[0].cssRules[0].selectorText; //第0條樣式選擇器

某些元素對象如img可以直接設置css樣式

obj.width="100%";

obj.setAttribute("style","widht:100px!important");
obj.removeAttribute("style");
obj.setAttribute("width","100%");  //某些元素適用（即“直接設置元素的屬性”的情況）

根據(jù)屬性設置單一樣式

obj.style.height = "100px";
obj.style.borderBottom="2px";
obj.cssFloat="left";

注意：

需要用屬性名cssFloat代替float（float是JavaScript保留關鍵字）

帶上單位（如果需要）

帶有連字符-的CSS屬性在JavaScript中，應該轉(zhuǎn)換成駝峰形式或?qū)傩悦◣б枺懺谥欣ㄌ朳]中

可設置多個樣式

obj.style.cssText="color:gray;font-size:1.25rem;"

obj.style.setProperty("height", "300px", "important");
obj.style.removeProperty("color");

給元素對象增/改/刪className或者idName。相應的class/id設置有相關樣式。

obj.setAttribute("class",newClassName);
obj.removeAttribute("class",newClassName) ;

obj.className=newClassName;
obj.id=newIdName;

? 注意：元素對象沒有class（class是JavaScript保留關鍵字）這個屬性，只有className這個屬性。

let attrName=document.createAttribute("class");
let attrName.nodeValue=className;//一個已經(jīng)存在的class
obj.attributes.setNamedItem(attrName);
obj.attributes.removeNamedItem(attrName);

link節(jié)點增/刪/改

示例（添加樣式表）：

let linkNew=document.creatElement("link");
linkNew=setAttribute("rel","stylesheet");
linkNew=setAttribute("hreft","new.css");
document.head.appendChild(link);

innerHTML

更改link的href
……

innerHTML或textContent 寫入/清空style標簽

style節(jié)點增/刪/改（參照上文操作link標簽/節(jié)點之link節(jié)點增/刪/改示例）……

StyleSheets是一個類數(shù)組對象，包含了當前文檔的所有css樣式表。

disable 屬性：打開或關閉一張樣式表。

document.styleSheets[0].disabled;

delteRule()/insertRule()

ie使用addRule()和removeRule()。

document.styleSheets[0].deleteRule(0);
document.styleSheets[0].insertRule(".test{color:red;font-size:1.5em;}");

innerHTML寫入樣式表

document.getElementByTagName("head")[0].innerHTML+= 

innerHTML或textContent增/刪style標簽 更改style標簽的內(nèi)容
參照上面

innerHTML（新建元素節(jié)點）中寫入行內(nèi)樣式/id/class

示例：obj.innerHTML=red
……