更改所有边框颜色

Question

单击按钮后，我试图更改当前页面上的所有边框颜色。我是通过切换一个类并在CSS中定义该类来实现的。

    var all = document.querySelector("*")
    
    changeBorder = function() {
        all.classList.toggle("border");
    }

    *.border {
        border-style: solid;
        border-color: green;
    }
    div {
        border: 1px solid black;
    }

    <button onclick="changeBorder()">Change the borders</button>
    
    <div>Border</div>
    <div>Border</div>
    <div>Border</div>
    <div>Border</div>
    <div>Border</div>

上面的代码不起作用，因为它对页面上的所有内容都加了边框，并且删除“边框样式”将使代码无效。

Answer 1

首先尝试避免使用on HTML属性来调用函数，而应使用带有addEventListener的选择器

---

这是一个基本代码，可通过在循环classList中使用forEach来实现您想要的目标

//short version
document.querySelector('.js-toggle').addEventListener('click', () => document.querySelectorAll('div').forEach(el => el.classList.toggle('red')))

//regular version
//document.querySelector('.js-toggle').addEventListener('click', () => {
//  document.querySelectorAll('div').forEach((el) => {
//    el.classList.toggle('red')
//  })
//})

div {
  border: 1px solid black
}

.red {
  border-color: red
}

<button class='js-toggle'>Change the borders</button>

<div>Border</div>
<div>Border</div>
<div>Border</div>
<div>Border</div>
<div>Border</div>

如果您确实要选择所有元素以更改边框，则可以使用通配符选择器*

//short version
document.querySelector('.js-toggle').addEventListener('click', () => document.querySelectorAll('*').forEach(el => el.classList.toggle('red')))

//regular version
//document.querySelector('.js-toggle').addEventListener('click', () => {
//  document.querySelectorAll('*').forEach((el) => {
//    el.classList.toggle('red')
//  })
//})

div {
  border: 1px solid black
}

.red {
  border-color: red
}

<button class='js-toggle'>Change the borders</button>

<div>Border</div>
<div>Border</div>
<div>Border</div>
<div>Border</div>
<div>Border</div>

Answer 2

<button onclick="changeBorder()">Change the borders</button>

<div>Border</div>
<div>Border</div>
<div>Border</div>
<div>Border</div>
<div>Border</div>

<style>
    *.border {
        border-style: solid;
        border-color: green;
    }
    div {
        border: 1px solid black;
    }
</style>
<script>
    // var all = document.querySelector("*"); we should select the divs, not everything.
    var all = document.querySelectorAll("div");

    changeBorder = function () {
        // all.classList.toggle("border"); we should loop through the array of divs. 
        for (let i = 0; i < all.length; i++) {
            all[i].classList.toggle("border");
        }
    };
</script>

所以

1. 我用querySelector更改了querySelectorAll
2. 我将目标从所有内容更改为仅div：querySelectorAll("div")
3. 我遍历数组并切换了每个div的类

Answer 3

var all = document.querySelectorAll("*")

changeBorder = function() {
    all.forEach(item =>{
        item.classList.toggle("border");
    })
}

*.border {
    border-style: solid;
    border-color: green;
}
div {
    border: 1px solid black;
}

<button onclick="changeBorder()">Change the borders</button>

<div>Border</div>
<div>Border</div>
<div>Border</div>
<div>Border</div>
<div>Border</div>