使用javascript更改css中所有出现的单词

Question

我已经看到我们可以使用javascript使用document.body.innerHTML = document.body.innerHTML.replace(/hello/g, 'hi');更改HTML中所有出现的文本document.body.innerHTML = document.body.innerHTML.replace(/hello/g, 'hi'); 但我正在尝试更改CSS文件中的所有出现。

我想做的是这样的：

var h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
var w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
var proportion = w/h;
if (proportion > 1.59) {
    // width > height
    document.body.innerHTML = document.body.innerCSS(?).replace(/vw/g, 'vh');
} else {
    // height > width
    document.body.innerHTML = document.body.style(?).replace(/vh/g, 'vw');

}

比如当页面的宽度更大时将vw改为vh，当高度更大时将vh改为vw。

Answer 1

您可以通过javascript修改样式表规则选择器：

小提琴

function replace_css_selector(search_value, new_value) {
    var css_styles = "";
    var style = null;
    for (var i = 0; i < document.styleSheets.length; i++) {
        with(document.styleSheets[i]) {
            if (typeof css_rules != "undefined") {
                style = css_rules;
            } else if (typeof rules != "undefined") {
                style = rules;
            }
        }
        for (var item in style) {
            if (style[item].cssText != undefined) {
                css_styles = (style[item].cssText);
                style[item].selectorText = style[item].selectorText.replace(search_value, new_value);
            }

        }
    }
    return style;
}

list = replace_css_selector(/vh/g, 'vw');