How can I override a css variable by code?

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.

Answer 1

Get the element, then set property on its style

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