09-样式元素

18.8　样式元素

通过DOM API，大家对元素的样式有了彻底且细粒度的掌控。然而，相比于修改元素属性，使用CSS类来修改样式通常是一个比较好的实践。也就是说，如果想修改一个元素的样式，只需要创建一个新的CSS类，然后把它应用到需要修改样式的元素（可以是多个）上。在JavaScript中，把一个CSS类应用到元素上非常容易。例如，如果想高亮所有包含单词“unique”的段落，可以先创建一个CSS类：

.highlight {
    background: #ff0;
    font-style: italic;
} 

接下来，要找到所有

标签，如果它们包含单词“unique”，就给它们加上 highlight 的 class 。HTML中的每个元素都包含一个叫作 classList 的属性，它包含了该元素的所有 class （如果有的话）。 classList 的add方法可以给元素上添加新的 class 。本章后面还会用到这个例子，所以这里创建一个叫作highlightParas的函数来实现功能：

function highlightParas(containing) {
    if(typeof containing === 'string')
        containing = new RegExp('\\b${containing}\\b', 'i');
    const paras = document.getElementsByTagName('p');
    console.log(paras);
    for(let p of paras) {
        if(!containing.test(p.textContent)) continue;
        p.classList.add('highlight');
    }
}
highlightParas('unique');

如果想删除highlight这个类，可以用 classList.remove ：

function removeParaHighlights() {
    const paras = document.querySelectorAll('p.highlight');
    for(let p of paras) {
        p.classList.remove('highlight');
    }
} 

在删除 `highlight` 类时，可以复用paras变量，只要在每个段落元素上调用 `remote('highlight')` 即可；如果元素上已经不存在这个class，该方法就什么都不做。不过，后面很可能会有删除class的需要，同时其他代码也可能会添加高亮段落，所以如果代码的目的是删除所有的高亮样式，在删除之前之前先执行查询语句会安全得多（译者注：类似在数据库中执行删除语句，删除前先查询，确保所删内容的正确性）。