Javascript用另一种样式替换样式

Question

我有一些代码需要通过 javascript 更改，因为我自己无法编辑代码（它是由我用于我的网站的平台创建的）

<tr style="color:#8C4510;background-color:#FFF7E7;">

我想要做的是，无论出现在哪里，用其他颜色替换颜色，但它只需要用于这些颜色，而不是所有<tr> 标签。

示例：将#8C4510 替换为#CCCCCC

我知道 getElementsByTagName，但不确定如何定位该元素中的某些样式以查找并替换为其他样式。

这是我尝试过的：

var bgcolor = document.querySelectorAll("*[style]");

for (var i=0; i<bgcolor.length; i++) {
var style = bgcolor[i];

if (background-color == '#FF8000') {
    background-color = '#ed5900';

if (background-color == '#E5F2E5') {
    background-color = '#f8f8f8';
}

if (background-color == '#FFF7E7') {
    background-color = '#f8f8f8';

if (background-color == '#855129') {
    background-color = '#8ebe3e';
}

if (background-color == 'orange;') {
    background-color = '#8ebe3e';
}

if (color == '#8C4510') {
    color = '#8ebe3e';
}


}

还有

function changeBGAll() {
var bg = document.querySelectorAll("*[style]");
for (var i = 0; i < bg.length; i++) {
    if (bg[i].style.indexOf('FF8000') !== -1) {
        bg[i].style = bg[i].style.replace("FF8000", "ed5009");
    }
  }
}
changeBGAll();

Answer 1

您可以使用jQuery 轻松完成此操作。然后你可以使用这样的代码来做你想要的类：

$('#idOfMyElement').addClass('myClassName');

或

$('#idOfMyElement').removeClass('myClassName'); 

如果你希望它们是可切换的：

$('#idOfMyElement').toggleClass('myClassName');

您需要在 html 中导入 jQuery 库才能使用它。当然，不用 jQuery 也可以做到这一点，但我一直发现使用 jQuery 更容易，尤其是因为它是一个无处不在的库。

这还需要您使用 css 类，这绝对是您想要做的事情，以保持代码的可读性和可维护性。

Answer 2

你可以用下一个方法：

var elements = document.querySelectorAll('*');
var element;
var i, len = elements.length;
for (var i=0; i<len; ++i) {
    element = elements[i];
    if(element.style.cssText.indexOf('color:#8C4510') > -1) {
        element.style.color = '#CCCCCC';
    }
}

或

if(element.style.cssText.indexOf('color: rgb(140, 69, 16)') > -1) {
    element.style.color = '#CCCCCC';
}

但这对你来说可能会很慢，所以如果你准备好付出这个代价，请好好决定。

Answer 3

您可以将HTML DOM querySelectorAll() Method 与CSS [attribute*=value] Selector 一起使用来拾取元素。然后使用("object").style.attribute = "new value"; 设置一个新值。下面的示例有一个tr 粉红色和黑色，但 javascript 已将其颜色更改为黄色 + 红色。第一个紫色/白色tr 仍然未受影响。

var x = document.querySelectorAll("tr[style*='color:pink']");
var i;
for (i = 0; i < x.length; i++) {
    x[i].style.color = "red";
}

var y = document.querySelectorAll("tr[style*='background-color:black']");
var i;
for (i = 0; i < x.length; i++) {
    x[i].style.backgroundColor = "yellow";
}

<table><tr style="color:white;background-color:purple;"><td><h1>text</h1></td></tr></table>

<table><tr style="color:pink;background-color:black;"><td><h1>text</h1></td></tr></table>

Answer 4

在您的问题中，您具体谈到了如何查找和替换设置为内联样式的颜色。

首先，我将添加关于最佳的强制性关注 实践：你不应该使用内联样式。如果你的平台 正在使用这样做，您可能需要验证它是最新的 版本并积极维护，因为我们现在生活在 2016 年，尤其是 “平台”在演示中应该没有发言权。它可能提供 使用样式表的建议和（正确的）默认值，甚至使它 很难通过具有高特异性选择器来覆盖，但内联 样式只能被其他内联样式覆盖，这就是它的原因 是不好的做法。

好的，现在我们已经了解了这一点，我知道您遇到了问题并需要修复。

由于内联样式是使用属性设置的，我们可以使用属性选择器来挑选我们需要查看的元素。

[style*="#8C4510"]

为了选择与此匹配的元素，您有几个选项，例如 vanilla javascript：

var elements = document.querySelectorAll('[style*="#8C4510"]'),
    length, i;

for (i = 0, length = elements.length; i < length; ++i) {
    elements[i].style.color = '#ccc';
}

或者，你可以使用 jQuery：

$('[style*="#8C4510"]').css('color', '#ccc');

现在，这里有几个问题，因为最终您需要评估 color 或 background-color 是否匹配。看看这种方法会很诱人

if (elements[i].style.color === '#8C4510')

只是发现某些/所有浏览器实际上已将该值更改为该颜色的另一种表示形式（例如 rgb(...) 变体），这显然不匹配。 在这种情况下，您最好获取原始属性值和正则表达式

var style = elements[i].getAttribute('style'),
  pattern = /(\b(?:background-)?color):\s*(#[0-9a-f]+)/gi,
  match, prop;

while ((match = pattern.exec(style))) {
  prop = match[1].replace(/-([a-z])/g, function(m, s) {
    return s.toUpperCase();
  });

  if (prop && match[2] === '#8C4510') {
    elements[i].style[prop] = '#ccc';
  }
}

（我既懒惰又不是 jQuery 的特别粉丝，我将跳过演示这种方法的 jQuery 等效项）