时间戳

首页 > 解决方案 > 更改所有边框颜色

javascript - 更改所有边框颜色

问题描述

单击按钮后，我正在尝试更改当前页面上的所有边框颜色。我通过切换一个类并在 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>

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

标签： javascripthtmlcss

解决方案

首先尽量避免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>

推荐阅读