JS高程 -- chapter12( DOM2、DOM3 )

样式

---

定义元素样式的方式有三种：通过 <link/> 标签外联样式、通过 style 标签在头部定义样式、通过 style 属性 在 HTML 元素上定义样式

 

访问元素的样式

元素的 style 属性包含着通过 HTML元素 style 属性定义的所有样式信息( 内联样式 )，不包含 外联、头部 样式信息

对于使用 - 分割的属性，需要转换为 驼峰式来访问

 

计算的样式

计算样式都是只读的

 
getComputedStyle()： 可以获取当前元素的样式信息，接收两个参数，要取得计算样式的元素 和 伪元素字符串( :after )，不需要则第二个参数可以传 null，返回一个 CSSStyleDeclaration 对象，包含当前对象的所有计算的样式

 
currentStyle：IE 不支持上述方法，提供了 currentStyle 属性来实现相同的效果

 

元素大小

1. 偏移量

• offsetHeight： 元素的高度
• offsetWidth： 元素的宽度
• offsetLeft： 元素距离左侧的距离
• offsetTop： 元素距离上方的距离
  

所有这些偏移量都是只读的，而且每次访问它们都会重新计算

 

2. 客户区大小

元素的客户区大小，指的是 元素内容及其内边距 所占的空间大小

和偏移量相似，客户区大小也是只读的，每次访问都会重新计算

 

3. 滚动大小

• scrollHeight： 没有滚动条的情况下，元素内容的总高度
• scrollWidth： 没有滚动条的情况下，元素内容的总宽度
• scrollLeft： 左侧被隐藏的内容的像素数，非只读
• scrollTop： 上方被隐藏的内容的像素数，非只读

 

4. 确定元素大小

元素都有一个 getBoundingClientRect() 方法，该方法返回一个矩形对象，包含 top left bottom right 四个属性，分别表示元素相对于 视口 的位置信息