Question

我希望改变“重音”。网站的颜色。有没有人知道用颜色＆＃39;洋红色＆＃39;来改变所有元素的背景颜色，颜色和边框颜色的有效方法。例如？有没有办法检测CSS文件中的属性洋红色，并用另一种颜色替换它？我正在为一个网站建立一个扩展（并且不希望附加一个带有颜色变化的大量CSS文件）并且不能更改网站的源代码。

如果有任何不清楚的地方，请随时提出。

Answer 1

您可以使用jQuery .css() 方法更改多个css属性：

$(".yourCssSelector").css({
    "background-color": "magenta",
    "color": "#00FF00",
    "border-color": "blue"
});

或使用vanilla JS：

// choose an element using any of these:
var elem = document.getElementById('your-id');
var elem = document.getElementsByClassName('your-class-name')[0];
var elem = document.getElementsByTagName('div')[1]; // indexes are for example

elem.style.borderColor = 'blue';
elem.style.backgroundColor = 'magenta';
elem.style.color = '#00FF00';

是的，它需要很多CSS更改。你想改变整个网站的外观 - 当然，它会。我不认为您的网站设计师使用内联样式为magenta着色每个元素 - 存在样式，明智地选择选择器和类，您将很容易做到这一点。

Answer 2

你可以这样做。循环遍历所有元素，如果计算出的颜色是洋红色，则在元素上设置新颜色。

var elems = document.body.getElementsByTagName("*"),
    oldColor = "rgb(255, 0, 255)",
    newColor = "rgb(0, 0, 0)";

function getValue (elem, property) {
    return window.getComputedStyle(elem, null)
        .getPropertyValue(property);
}

Array.prototype.forEach.call(elems, function (elem) {
    var backgroundColor = getValue(elem, "background-color"),
        borderColor = getValue(elem, "border-color"),
        color = getValue(elem, "color");

    if (backgroundColor == oldColor) {
        elem.style.backgroundColor = newColor;
    }

    if (borderColor == oldColor) {
        elem.style.borderColor = newColor;
    }

    if (color == oldColor) {
        elem.style.color = newColor;
    }    
});

function changeColors () {
    var elems = document.body.getElementsByTagName("*"),
        oldColor = "rgb(255, 0, 255)",
        newColor = "rgb(0, 0, 0)";

    function getValue (elem, property) {
        return window.getComputedStyle(elem, null)
            .getPropertyValue(property);
    }
  
    console.log(elems);
 
    [].forEach.call(elems, function (elem) {
        var backgroundColor = getValue(elem, "background-color"),
            borderColor = getValue(elem, "border-color"),
            color = getValue(elem, "color");

        if (backgroundColor == oldColor) {
            elem.style.backgroundColor = newColor;
        }

        if (borderColor == oldColor) {
            elem.style.borderColor = newColor;
        }

        if (color == oldColor) {
            elem.style.color = newColor;
        }    
    });
}

.magenta-background {
    color: white;
    background-color: magenta;
}
.magenta-color {
    color: magenta;
}
.magenta-border {
    border: solid 2px magenta;
}

<body>
    <div class="magenta-background">Magenta Background</div>
    <div class="magenta-color">Magenta text</div>
    <div class="magenta-border">Magenta border</div>
    <button onclick="changeColors()">Change Colors</button>
</body>

如果有其他选择，我不建议这样做。预先更改CSS将是理想的，而根本不使用JS。

更改所有元素的颜色

2 个答案: