JS 获取元素的样式

元素样式有几种形式，其中：

• 外部样式：HTML 中通过 <link> 标签引入的 CSS 文件样式。
  <link rel="stylesheet" href="main.css">

• 内部样式：写在 HTML 文档中，<style> 标签中设置的 CSS 。

  <style>
  .box {
      height: 100px;
      width: 100px;
  }
  </style>
  

• 行内（内联）样式：写在元素标签内的样式。
  <div class="box" style="height: 100px;width: 100px"> 内联样式 </div>

---

使用 JS 获取各种样式的方法（从内到外顺序）：

• 获取行内（内联）样式

使用 Obj.style.attributeName

先获取元素，随后获取 style 属性 中的样式，可以返回样式的值。

var box = document.getElementById("box");
alert(box.style.height)     // 获取 box 的行内样式 height 的值如 100px

使用 Obj.getAttribute('style')

该方法返回所有行内样式，即行内属性 style 的值

var box = document.getElementById("box");
alert( box.getAttribute('style') );
// 获得字符串，如 "height: 100px; width: 100px;"

• 获取非内联的样式

  • 在 ie 浏览器中 —— obj.currentStyle['height']
  • 非 ie 浏览器中 —— getComputedStyle(obj).height

  这两个方法，
  原理是返回该元素最终应用上的样式属性，即该元素被设置的所有属性。
  其中，currentStyle[] 和 obj.style 比较接近，都可以支持读写。
  而 getComputedStyle(obj) 只能读，不是能进行值的改写。

---

jQuery 中获取 CSS 样式，很简单，$().css()
大神来补充——获取元素CSS值之getComputedStyle方法熟悉

Wait me back