html Javascript将样式替换为其他样式

9jyewag0  于 2022-12-16  发布在  Java
关注(0)|答案(4)|浏览(117)

我有一些代码,我需要通过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();
jtw3ybtb

jtw3ybtb1#

您可以使用以下方法:

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';
}

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

qlvxas9a

qlvxas9a2#

你可以使用jQuery来轻松地完成这个任务,然后你可以使用类似下面的代码来处理类:

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

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

如果您希望它们是可切换的:

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

你需要在你的html中导入jQuery库来使用它,当然没有jQuery也可以这样做,但是我总是发现使用jQuery要容易得多,特别是它是一个如此普及的库。
这也要求你使用css类,这是你为了保持代码的可读性和可维护性而必须做的事情。

bmp9r5qi

bmp9r5qi3#

你可以同时使用HTML DOM querySelectorAll() MethodCSS [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>
xlpyo6sf

xlpyo6sf4#

在您的问题中,您特别谈到了如何查找和替换设置为内联样式的颜色。
首先,我将添加有关最佳实践的强制性关注:您不应该使用内联样式。如果您使用的平台使用内联样式,您可能需要验证它是否在最新版本上,并积极维护,因为我们现在生活在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');

现在,这里有几个问题,因为最终您将需要评估colorbackground-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等价物)

相关问题