How can I override a css variable by code? [duplicate]

Question

How can I override a css variable from dev console (or injected script of extension)

For example for google.com search page lets say I want to change rhs-width variable.

I can clearly see it defined like this:

.srp {
    --rhs-width: 372px;
}

My attempts so far:

var r = document.querySelector(':root');
var rs = getComputedStyle(r);
rs.getPropertyValue('--rhs-width')

rs don't seen to have it.

I tried var r = document.querySelector('.srp'); as well but result is same.

document.querySelector('.srp').style.setProperty('--rhs-width', "200px") for example — Jaromanda X
– Jaromanda X, Commented Jan 21, 2024 at 2:33

user23274861 · Accepted Answer · 2024-01-21 02:40:58Z

1

Get the element, then set property on its style

var r = document.querySelector('.srp');
r.style.setProperty('--rhs-width', value);

answered Jan 21, 2024 at 2:40

user23274861

3262 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

1 Answer 1