css

每个 DOM 节点都有一个 style 属性，这个属性本身也是个对象，包含了应用于节点的 CSS 样式信息。

遗憾的是，虽然这种方式在用于内联样式时很正常，但如果是在页面 <head>部分里使用 <style> 元素，或是使用外部样式表来设置页面元素的样式， DOM 的 style 对象就不能访问它们了

CSS 的很多属性名称包含连字符，比如 background-color 、 font-size 、 text-align 等。但 JavaScript 不允许在属性或方法名称里使用连字符，因此需要调整这些名称的书写方式。方法是删除其中的连字符，并且把连字符后面的字母大写，于是 font-size 变成 fontSize ， text-align 变成 textAlign ，以此类推

用 className 访问类

利用元素的 className 属性，可以通过修改 class 属性的值来调整应用于元素的样式。

DOM 的 styleSheets 对象

document 对象的 styleSheets 属性是一个数组，包含了页面上全部样式表（无论样式表是包含在外部文件中，还是在页面 <head> 部分里用 <style> 和 </style> 标签声明）。 styleSheets 数组里的项目以数值索引，第一个出现的样式表索引为 0 。

启用、禁用和切换样式表

数组里的每个样式表都有一个属性 disabled ，其值为布尔值 true 或 false 。它是可读写的，可以在 JavaScript 里方便地启用或禁用某个样式表
虽然样式表具有数值索引，但并不便于进行选择。如果给样式表设置标题，并且编写一个函数，根据 title 属性进行选择，就会容易得多
getComputedStyle() 目前，几乎所有浏览器都支持 DOM getComputedStyle() 方法。该方法可以访问一个元素的最终（也就是计算后的）样式。最终样式，指的是浏览器（以适当的顺序）应用了与该元素相关的所有样式规则之后，最终显示该元素的样式。

getComputedStyle() 方法返回一个对象，该对象有各种方法，包括 getPropertyValue(property) ——该方法返回给定的 CSS 属性名称的当前值。

大小

使用 offsetWidth 和 offsetHeight

使用 offsetWidth 和 offsetHeight 两个属性可以获取元素的尺寸，其中 offsetWidth 标识元素在页面的总宽度， offsetHeight 表示元素在页面的总高度。

scrollLeft 和 scrollTop

使用 scrollLeft 和 scrollTop 可以读写移除可视区域外面的宽度和高度。

scrollLeft : 读写元素左侧已滚动的距离，即位于元素左侧边界与元素当前可见区域最左侧的距离
scrollTop : 读写元素顶部已滚动的距离，即位于元素顶部边界与元素当前可见区域最顶部的距离

使用这两个属性可读写滚动条的位置，或者获取滚动区域外的尺寸。

获取元素大小

元素尺寸属性	说
clientWidth	获取元素的可视部分的宽度，即 CSS 的 width 和 padding 属性值之和，元素边框和滚动条不包括在内，也不包括任何可能的滚动区域
clientHeight	获取元素的可视部分的高度，即 CSS 的 height 和 padding 属性值之和，元素边框和滚动条不包括在内，也不包括任何可能的滚动区域
offsetWidth	元素在页面中占据的宽度的总和，包括 width 、 padding 、 border 以及滚动条的宽度
offsetHeight	元素在页面中占据的高度的总和，包括 height 、 padding 、 border 以及滚动条的高度
scrollWidth	当元素设置了 overflow ： visible 样式属性时，元素的总宽度，也称滚动宽度。在默认状态下，如果该元素值大于 clientWidth 属性值，则元素会显示滚动条，以便能够翻阅被隐藏的区域

| scrollHeight | 当元素设置了 overflow ： visible 样式属性时，元素的总高度，也称滚动高度。在默认状态下，如果该元素值大于 clientHeight 属性值，则元素会显示滚动条，以便能够翻阅被隐藏的区域

clientHeight= padding-top
- height
  - border-bottom-width- 滚动条的宽度
offsetHeight= border-top-width
- padding-top
  - height+ padding-bottom
    - border-bottom-width
scrollHeight= padding-top
- 包含内容的完全高度
  - padding-bottom

获取窗口大小

获取 <html> 标签的 clientWidth 和 clientHeight 属性，既可以知道浏览器窗口的可视宽度和高度，而 <html> 标签在脚本中表示为 document.documentElement 。

✂️

var w = document.documentElement.clientWidth;
var h = document.document.clientHeight;

在怪异模式下， body 是最顶成的可视元素，而 html 元素保持隐藏。只有通过 <body>标签的 clientWidth 和 clientHeight 属性才可以知道浏览器窗口的可视宽度和高度，而

<body> 标签在脚本中表示为 document.body 。

位置

使用 offsetLeft 和 offsetTop

offsetLeft 和 offsetTop 属性返回当前元素的偏移位置， IE 的怪异模式以父元素为参照物进行偏移的位置， DOM 标准模式以最近定位元素为参照进行偏移的位置。

✂️

html

<head>
  <style type="text/css">
    div {
      width: 200px;
      height: 100px;
      border: solid 1px red;
      padding: 50px;
    }
    #wrap {
      position: relative;
      border-width: 20px;
    }
  </style>
</head>
<body>
  <div id="wrap">
    <div id="sub">
      <div id="box"></div>
    </div>
  </div>
  <script>
    var box = document.getElementById('box');
    console.log(box.offsetLeft);
    console.log(box.offsetParent.id);
  </script>
</body>

使用 offsetParent

offsetParent 属性表示最近的上级定位的元素。要获取相对相应的父级元素的位置，可以先判断 offsetParent 属性是否指向父元素，如果是，则直接使用 offsetLeft 和 offsetTop 属性获取元素相对于父元素的距离，否则分别获取当前元素和父元素距离窗口的坐标，然后求差