經常使用JavaScript操做CSS方法總結

[TOC]

---

獲取樣式

元素對象的寬高位置距離等屬性

如offsetWidht、cilentWidht、scrollWidth……

let oWidth=obj.offsetWidth;

注意：

• 只能獲取屬性值（只讀）
• （這些寬高距離的）值是數字

style對象的屬性

獲取全部樣式（樣式的內容，字符串形式）cssText 和獲取單項樣式：

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

注意：

• 須要用屬性名cssFloat代替float（float是JavaScript保留關鍵字）
• 取得的屬性值帶有單位（若是有單位）
• 只能獲取行內樣式（html標籤中的樣式）
• 能夠獲取和設置（可讀可寫）

window對象的getComputedStyle() 方法

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

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

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

• 經過屬性名獲取相應屬性值

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

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

  接收一個參數：屬性名（帶引號，原帶-的CSS屬性要轉換成駝峯法書寫）

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

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

• getPropertyValue()方法

  能夠獲取CSS樣式申明對象上的屬性值（直接屬性名稱）
  接收一個參數：屬性名（帶引號，原帶-的CSS屬性要轉換成駝峯法書寫）

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

注意：

• 全局對象的方法
• 只能獲取樣式（只讀）
• 能獲取默認、繼承的屬性
• 返回的值帶有單位（若是有）
• 獲取最終樣式值

元素對象的getClientRects()/getBoundingClientRect()方法

元素對象的方法。

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

  獲取元素佔據頁面的全部矩形區域樣式。返回值一個TextRectangle對象集合，包含：top left bottom right width height 六個屬性（上下左右寬高）

  注意：

  • 只用於行內元素
  • 只能獲取樣式（只讀）

let rectCollection = obj.getClientRects();

• getBoundingClientRect()獲取元素位置

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

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

  注意：

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

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

  • 只能獲取樣式（只讀）

let eleInfo= obj.getBoundingClientRect();

CSS StyleSheets對象的屬性和方法

document.styleSheets返回StyleSheetList是一個類數組對象，包含了當前文檔的全部css樣式表。

• cssRules 返回一個類數組對象cssRuleList，其包含樣式表中全部CSS規則。

  cssRules數組對象內元素的經常使用屬性（屬性均爲只讀，屬性值均是字符串）：

  • cssText 返回css樣式
  • style.cssText 返回該條規則的全部樣式聲明
  • style.[attr] 返回具體某個屬性的樣式
  • selectorText 返回該條規則的選擇器
  • parentRule 返回包含規則（若是有）（例如 @media 塊中的樣式規則）

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

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

設置樣式

直接設置元素的屬性

某些元素對象如img能夠直接設置css樣式

obj.width='100%';

setAttribute()/removeAttribute()設置元素的style屬性

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

style對象的屬性和方法

• 根據屬性設置單同樣式

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

注意：

• 須要用屬性名cssFloat代替float（float是JavaScript保留關鍵字）
• 帶上單位（若是須要）
• 帶有連字符-的CSS屬性在JavaScript中，應該轉換成駝峯形式或將屬性名（帶引號）寫在中括號[]中

cssText設置樣式字符串

可設置多個樣式

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

setProperty()/removeProperty

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

操做class/id改變樣式

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

元素對象的setAttribute()/removeAttribute()設置class/id

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

設置元素對象的className/id屬性

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

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

屬性對象attributes的set/removeNamedItem()設置屬性名

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

操做link標籤/節點

• link節點增/刪/改

  示例（添加樣式表）：

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

• innerHTML
• 更改link的href
  ……

操做style標籤/節點

• innerHTML或textContent 寫入/清空style標籤
• style節點增/刪/改（參照上文操做link標籤/節點之link節點增/刪/改示例）……

CSS StyleSheets對象的屬性和方法

StyleSheets是一個類數組對象，包含了當前文檔的全部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(textContent)

• innerHTML寫入樣式表

document.getElementByTagName('head')[0].innerHTML+= <link rel="stylesheet" href="new.css">

• innerHTML或textContent增/刪style標籤 更改style標籤的內容
  參照上面
• innerHTML（新建元素節點）中寫入行內樣式/id/class

  示例：obj.innerHTML=<span style="color:red">red</span>……