DOM的样式操作

• getAttribute()方法

返回的是内联样式的声明内容

//元素.getAttribute(属性名称);
var btn=element.getAttribute('style');

• style属性

DOM中HTMLElement对象提供了style属性
1.返回CSSStyleDeclaration对象
2.DOM中对应CSS中所有样式属性提供的对象(封装了所有样式属性)
3.得到样式属性对应的值，字符串类型(将其转换为Number类型)

//用style属性获取
//获取页面div的id属性值为d1的元素
var div=document.getElementById('d1');
//直接使用style属性获取内联样式
var style=div.style;

• 获取内嵌与外联样式表

Document对象提供了styleSheets属性
获取当前HTML页面中所有的样式表
StyleSheetList对象(类数组对象)
type属性：表示当前使用的是CSS样式
href属性：表示当前样式的路径
cssRules/rules属性：表示当前样式表中所有的样式规则
CSSRuleList对象：表示当前样式表中的所有规则集合(类数组对象)
DOM中提供有关外联样式的获取与设置

1.操作比较复杂
2.操作时容易出错

实际情况：
1.页面整体样式风格改变，通过元素的href属性的值得修改(修改引入的CSS文件)
2.页面局部样式风格改变，内联样式的优先级别高于外联样式的特点(通过内联样式覆盖外联样式)

//获取内嵌样式表或外联样式表的步骤
var styleSheetList=document.styleSheets;
var styleSheet=styleSheetList[0];
var cssRuleList=styleSheet.reles;
var cssStyleRule=cssRuleList[0];
var styleDecl=cssStyleRule.style;
console.log(styleDecl.width);

• class属性的操作

DOM中某个对象提供了className属性，直接可以得到Class属性的值

//元素名.className
var className=div.className;
//classList属性(浏览器兼容问题)：获取多个类选择器叠加的用法
//元素名.classList
var classList=div.classList;

• 获取有效样式

window对象的getComputedStyle(element)方法
1.获取指定元素的当前有效样式内容
返回值：CSSStyleDeclaration对象
该方法仅用于获取，不能用于设置

//window.getComputedStyle(元素名)
var style=window.getComputedStyle(div);
//getComputedStyle(element)方法具有浏览器兼容问题
//IE 8以下浏览器不支持，提供currentStyle属性
var style=div.currentStyle;

• 获取元素内部的宽度和高度

只能获取，不能设置，范围是：内容区+内边距
clientWidth:获取宽度
clientHeight:获取高度

//元素名.clientWidth
console.log(div.clientWidth);
//元素名.clientHeight
console.log(div.clientHeight);

• 获取内容区的宽度和高度

scrollWidth:内容区的宽度
scrollHeight:内容区的高度

//元素名.scrollWidth
console.log(div.scrollWidth);
//元素名.scrollHeight
console.log(div.scrollHeight);

• 获取指定元素的定位父元素

1.如果当前元素的所有祖先元素都没有开启定位的话，默认为元素
2.如果当前的所有祖先元素中，只能一个开启定位的话，默认为开启定位的祖先元素
3.如果当前元素的所有祖先元素中，具有多个开启定位的话，距离当前元素最近的那个祖先元素

//元素名.offsetParent
console.log(d1.offsetParent);