如何添加、删除、切换DOM元素的class和获得计算后的样式值

在书写css的时候，一般大家采用内部样式

<style>
	.title {
		color: red;
	}
</style>

如果我们需要通过js对元素的偏移量或者display: none进行设置的时候如果我们为元素添加一个只有这种简单的样式的话有点繁琐，所以这时采用内联样式反而会简单点。

<div>
	<p id='content' style='dispaley: none'>hello</p>
</div>

// js
content.style.backgroudColor = 'blue' // 多个词之间使用camelCase写法

因为ele.style是一个只读的对象，所以直接通过字符串对其重写是行不通的，在ele.style中设置的高度宽度等需要写清楚px， ele.style.width = '20px'

// 不可以
ele.style = 'color: red !important;
    background-color: yellow;
     100px;
    text-align: center;'

可是使用设置属性的方法

ele.setAttribute('style', 'color: red !important;
    background-color: yellow;
     100px;
    text-align: center;')

HTML的特性和dom的属性关系

这里介绍了style 作为dom的属性他是一个对象，写在class中的无法被获取到，只有通过setAttribute或者之间写在html中的才会被读取到，需要读取到真实可用的请使用getComputedStyle方法

获取dom的全部class值

两个属性

className
classList

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div id='content' class='text-color background font-size'>
   hello world
  </div>
</body>
</html>


// css
.text-color {
  color: red
}
.background {
  background-color: blue;
}
.font-size {
  font-size:22px
}


// js

console.log(content.className) //"text-color background font-size"

classList输出

console.log(content.classList)

// output
[object DOMTokenList] {
  0: "text-color",
  1: "background",
  2: "font-size",
  add: function add() { [native code] },
  contains: function contains() { [native code] },
  entries: function entries() { [native code] },
  forEach: function forEach() { [native code] },
  item: function item() { [native code] },
  keys: function keys() { [native code] },
  length: 3,
  remove: function remove() { [native code] },
  replace: function replace() { [native code] },
  supports: function supports() { [native code] },
  toggle: function toggle() { [native code] },
  toString: function toString() { [native code] },
  value: "text-color background font-size",
  values: function values() { [native code] }
}

可以看到classList 有还多方法可以使用，比如add 、remove、contains 、toggle ...

这也是这两个属性的区别，对className赋值的话会使得所有的class被清空后赋值，而使用classList的方法可以实现增删改查，下面就记录下这几种用法：

elem.classList.add/remove("class") —— 添加/移除类。
elem.classList.toggle("class") —— 如果类存在就移除，否则添加。
elem.classList.contains("class") —— 返回 true/false，检查给定类。

classList可以被循环遍历得出

`getComputedStyle`的用法

如下情况

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div id='content' class='title'>
   hello world
  </div>
</body>
</html>

// css
.title {
  200px;
  height: 200px;
  border: 1px solid red;
}

//js 
console.log('border:' + content.style.border) //"border:"
console.log(' '+content.style.width) //" "
console.log('height: ' + content.style.height) //"height: "

可见通过dom的属性style是获取不到class设置的内容的，那么我们在需要计算高度和宽度的时候怎么办呢？

getComputedStyle(element[, pseudo])

element

用来读取样式值的的元素。
pseudo

假如给定一个伪元素，例如：::before。空字符串或无参意味着元素本身。

结果是一个具有样式属性的对象，像 elem.style，但现在对于所有的 CSS 类来说都是如此。

<head>
  <style> body { color: red; margin: 5px } </style>
</head>
<body>

  <script>
    let computedStyle = getComputedStyle(document.body);

    // 现在我们可以读出页边距和颜色了

    console.log( computedStyle.marginTop ); // 5px
    console.log( computedStyle.color ); // rgb(255, 0, 0)
  </script>

</body>

上面的例子获取宽度

var computedStyle = getComputedStyle(content) 

console.log(computedStyle.width) // 200px

paddingLeft 和 marginTop 需要写完整的，名称

备注：

clientWidth/Height计算元素内部宽度不包含边框的宽度 (padding+width )

offsetWidth/Height 计算包括边框宽度 (border+padding+width)

scrollWidth/height 包含隐藏区域的宽度和高度

ele.style.height = `${ele.scrollHeight}px`