[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+= - innerHTML或textContent增/删style标签 更改style标签的内容
参照上面 - innerHTML（新建元素节点）中写入行内样式/id/class
示例：
obj.innerHTML=red
……