如何在不使用 ID 的情况下将 CSS 更改为 JavaScript

Question

我有一个自定义滚轮，我想制作一个按钮，在该滚轮的两个类之间切换，例如，假设我有这些 CSS 行来设置滚轮的样式:

    body::-webkit-scrollbar {
      width: 1em;
    }

    body::-webkit-scrollbar-track {
      -webkit-box-shadow: inset 0 0 6px rgba(180, 88, 88, 0.473);
      background-color: rgb(131, 69, 69);
    }

    body::-webkit-scrollbar-thumb {
    background-color: rgb(185, 115, 115);
    outline: 1px solid slategrey;
    }

但是当我点击按钮时我希望它变成这样 CSS:

    body::-webkit-scrollbar {
      width: 1em;
    }

    body::-webkit-scrollbar-track {
      -webkit-box-shadow: inset 0 0 6px DIFFERENT COLOR;
      background-color: DIFFERENT COLOR;
    }

    body::-webkit-scrollbar-thumb {
    background-color: DIFFERENT COLOR;
    outline: 1px solid slategrey;
    }

我读过的所有内容都使用 ID 来更改该元素的 CSS，但我不能用滚轮来做到这一点。我希望这解释得足够好，请问我是否要我添加更多代码、示例等。

Answer 1

您可以 select jquery 上的元素，无需 ID，方法是使用类名、数据属性等。

$('button').on('click', function(){
    $('body::-webkit-scrollbar').css({
        'width' : '1em',
        ...
    })
    $('body::-webkit-scrollbar-track').css({
        'background-color' : 'DIFFERENT COLOR',
        'another-property' : 'another-value'
        ...
    })
    $('.class-name').css({
        'width' : '1em',
        ...
    })
    $('[data-foo="bar"]').css({
        'width' : '1em',
        ...
    })
    $('.class-name.with-another-classname').css({
        'width' : '1em',
        ...
    })
    $('.class-name .with-children').css({
        'width' : '1em',
        ...
    })
})

Answer 2

您只需在主体上切换 class 即可更改样式。

下面是一个额外的片段，它使用了 CSS variables。

const changeBtn = document.querySelector('.change-btn');

changeBtn.addEventListener('click', () => {
  document.body.classList.toggle('changed');
});

/* For demo purposes */
body {
  height: 500vw;
}

/* Default styling */
body::-webkit-scrollbar {
  width: 1em;
}

body::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(180, 88, 88, 0.473);
  background-color: rgb(131, 69, 69);
}

body::-webkit-scrollbar-thumb {
  background-color: rgb(185, 115, 115);
  outline: 1px solid slategrey;
}

/* Changed styling */
body.changed::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px orange;
  background-color: teal;
}

body.changed::-webkit-scrollbar-thumb {
  background-color: lime;
}

<button type='button' class='change-btn'>Change</button>

奖金 CSS variables

const changeBtn = document.querySelector('.change-btn');

changeBtn.addEventListener('click', () => {
  document.body.classList.toggle('changed');
});

body {
  height: 500vw; /* For demo purposes */
  --track-color: rgb(131, 69, 69);
  --thumb-color: rgb(185, 115, 115);
  --shadow-color: rgba(180, 88, 88, 0.473);
}

/* Default styling */
body::-webkit-scrollbar {
  width: 1em;
}

body::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px var(--shadow-color);
  background-color: var(--track-color);
}

body::-webkit-scrollbar-thumb {
  background-color: var(--thumb-color);
  outline: 1px solid slategrey;
}

/* Changed styling */
body.changed {
  --track-color: teal;
  --thumb-color: lime;
  --shadow-color: orange;
}

<button type='button' class='change-btn'>Change</button>

Answer 3

JavaScript 不需要 ID。 getElementById 的替代方法是使用 querySelector。 querySelector 可用于定位 classes、Id 或标签。

然而，在您的情况下，最好的解决方案是定位正文标签并向正文添加一个 class 以应用您在 CSS 中预定义的更改，如下例所示：

function addClass() {
  document.querySelector('body').classList.add('red');
}

html {
  color: white;
}

body {
  background-color: blue;
}

body.red {
  background-color: red;
}

<button onclick="addClass()">Turn background red</button>

Answer 4

我认为你最好的选择是这样做：

function toggleBodyActive(){
  document.body.classList.toggle('active');
}

/* set bodyheight for scrolling */
body{ height:200vh; }

body::-webkit-scrollbar {
          width: 1em;
}

body::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(180, 88, 88, 0.473);
  background-color: rgb(131, 69, 69);
}

body::-webkit-scrollbar-thumb {
background-color: rgb(185, 115, 115);
outline: 1px solid slategrey;
}


/* same but when body has .active class */

body.active::-webkit-scrollbar {
  width: 1em;
}

body.active::-webkit-scrollbar-track {
 -webkit-box-shadow: inset 0 0 6px rgba(0, 188, 88, 0.473);
  background-color: rgb(31, 169, 69);
}

body.active::-webkit-scrollbar-thumb {
background-color: blue;
outline: 1px solid slategrey;
}

<div onclick="toggleBodyActive();">toggle 'active'</div>

Answer 5

您可以为此使用 querySelector document.querySelector('body')

如何在不使用 ID 的情况下将 CSS 更改为 JavaScript

How can I change CSS with JavaScript without the use of an ID

html

javascript

css

jquery

scrollbar