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

Question

I have a custom scroll wheel and I want to make a button to switch between two classes for that scroll wheel, for example let's say I have these CSS lines to style the scroll wheel:

    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;
    }

But when I click the button I want it to change to this 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;
    }

Everything I have read uses the ID to change the CSS for that element but I can't do that with a scroll wheel. I hope this explained it well enough please ask me if you want me to add more code, examples etc.

Answer 1

You can just toggle a class on the body which changes the styling.

Below is an extra snippet that makes use of 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>

Bonus with 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 2

You can select elements on jquery without it's ID by using classNames, data-attributes, etc.

$('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 3

JavaScript does not require ID's. The alternative to getElementById is the usage of querySelector . querySelector can be used to target classes, Id's or tags.

In your case the best solution however would be to target the body tag and to add a class to the body that applies your changes you predefine in CSS like the sample below:

 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

I think your best option is to do it like this:

 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

You can use querySelector for that document.querySelector('body')