通常有两种设置元素样式的方式:

  1. CSS 中创建一个类,并添加它:<div class="...">
  2. 将属性直接写入 style<div style="...">

JavaScript 既可以修改类,也可以修改 style 属性。

相较于将样式写入 style 属性,我们应该首选通过 CSS 类的方式来添加样式。仅当类“无法处理”时,才应选择使用 style 属性的方式。

*例如将文本设为红色,添加一个背景图标 *

  • 可以在 CSS 中对这些样式进行描述,然后添加类(JavaScript 可以做到)。
  • 这样更灵活,更易于支持。

类名操作

elem.classList可以实现类名的基本操作

elem.classList 是一个特殊的对象,它具有 add/remove/toggle 单个类的方法。

例如:

<body class="main page">
  <script>
    // 添加一个 class
    document.body.classList.add('article');

  </script>
</body>

classList 的方法:

  • elem.classList.add/remove(class) — 添加/移除类。
  • elem.classList.toggle(class) — 如果类不存在就添加类,存在就移除它。
  • elem.classList.contains(class) — 检查给定类,返回 true/false

元素样式

elem.style 属性是一个对象,它对应于 "style" 特性(attribute)中所写的内容。

elem.style.width="100px" 的效果等价于我们在 style 特性中有一个 width:100px 字符串。

对于多词属性,使用驼峰式 :

background-color  => elem.style.backgroundColor
z-index           => elem.style.zIndex
border-left-width => elem.style.borderLeftWidth

注意单位

例如,我们不应该将 elem.style.top 设置为 10,而应将其设置为 10px

elem.style.属性名 只能获取行内样式

<body>
  <script>
    // 无效!
    document.body.style.margin = 20;
    alert(document.body.style.margin); // ''(空字符串,赋值被忽略了)

    // 现在添加了 CSS 单位(px)— 生效了
    document.body.style.margin = '20px';
    alert(document.body.style.margin); // 20px


  </script>
</body>

计算样式:getComputedStyle

*要读取所有 CSS 应用在元素上的最终值: *

getComputedStyle(element, [pseudo])

element: 需要被读取样式值的元素。

pseudo: 伪元素(如果需要),例如 ::before。空字符串或无参数则意味着元素本身。

例如:

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

  <script>
    var body = document.body;
    console.log(body.style.color); //获取不到 ,因为没有行内样式

    var computedStyle = getComputedStyle(document.body);
    // 现在我们可以读取它的 margin 和 color 了
    alert( computedStyle.marginTop ); // 5px
    alert( computedStyle.color ); // rgb(255, 0, 0)
  </script>

</body>

总结

要管理 class:

  • classList — 具有 add/remove/toggle/contains 方法的对象,可以很好地支持单个类。

要改变样式:

  • style 属性是具有样式的对象。对其进行读取和修改与修改 "style" 中的各个属性具有相同的效果。

要读取已解析的样式(对于所有类,在应用所有 CSS 并计算最终值之后):

  • getComputedStyle(elem, [pseudo]) 返回与 style 对象类似的,且包含了所有类的对象。只读。
文档更新时间: 2021-08-04 07:48   作者:张老师