乐趣区

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

jiezi

在书写 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;
    width: 100px;
    text-align: center;'

可是使用设置属性的方法

ele.setAttribute('style', 'color: red !important;
    background-color: yellow;
    width: 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 {
  width:200px;
  height: 200px;
  border: 1px solid red;
}

//js 
console.log('border:' + content.style.border) //"border:"
console.log('width:'+content.style.width) //"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`
退出移动版