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

你可以采取下一个方式：

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 2

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

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

或

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

如果你想要它们可以切换：

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

您需要在html中导入jQuery库才能使用它。当然可以在没有jQuery的情况下做到这一点，但我总是发现使用jQuery要容易得多，特别是因为它是如此普遍的库。

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

Answer 3

您可以将CSS [attribute*=value] Selector与("object").style.attribute = "new value";一起使用来获取元素。然后使用tr设置新值。以下示例的粉红色和黑色为tr，但javascript已将其颜色更改为黄色+红色。第一个紫色/白色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>

<TouchableWithoutFeedback onPress={__your_handler__}>
    <View>
        <Surface>
            <Shape d={__svg_path__}>
        </Surface>
    </View>
</TouchableWithoutFeedback>

Answer 4

在您的问题中，您将专门讨论如何查找和替换设置为内联样式的颜色。

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

好的，现在我们已经了解到，我发现您遇到了问题，需要修复。

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

[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相当于这种方法）

Javascript将样式替换为另一种样式

4 个答案: