Skip to main content

class

class​

class全局属性是一个区分大小写的类列表，该列表使用空格分割。类允许通过类选择或DOM方法在CSS和JavaScript中选择和访问特定的元素。

尽管规范中并没有对类的命名有特定的要求，但是鼓励Web开发人员使用描述元素语义的目的来命名而不是元素呈现的名称，语义化的名称在页面呈现发生变化时仍然保持逻辑。

使用技巧​

  1. 类名应当尽量具有语义化。
  2. 一个元素可有多个类命名，并使用空格隔开。
  3. 不同的元素可以有相同的类名，设置样式时统一生效。

案例​

<body class="h-full">
    <div class="flex h-full">
        <div class="box h-full left"></div>
        <div class="box h-full right"></div>
    </div>
</body>

className​

DOM元素的className属性用于获取和设置指定元素的class属性的值。

className属性用于表示class属性，主要是为了防止class关键字的冲突。

class是一个HTML属性，而className是一个DOM属性。

获取元素的类名称时，可通过以下方式：

const oDiv = document.querySelector('.flex')

console.log(oDiv.className) // flex h-full
console.log(oDiv.getAttribute('class')) // flex h-full

设置元素的类名称时，可通过以下方式：

const oDiv = document.querySelector('.flex')

oDiv.className = 'test'
oDiv.setAttribute('class','test')

console.log(oDiv.className) // test
tip

这两种设置方式都会完全覆盖之前的类名，因此使用时需谨慎。

classList​

classList是一个只读属性，返回元素的class属性的集合，然后可以使用其来操作类列表。classList是访问元素的类列表的一种替代方法，而不是通过className属性。

classList属性对应的是一个DOMTokenList对象，它代表元素class属性的内容。如果class属性未设置或为空，则返回一个空的DOMTokenList。尽管classList属性本身是只读的，但可以使用add()、remove()、replace()和toggle()方法来修改其关联的DOMTokenList。

const oDiv = document.querySelector('.flex'

oDiv.classList.add('test', 'test1')
oDiv.classList.remove('test1')
Last updated on