我有一些代码,我需要通过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();
4条答案
按热度按时间jtw3ybtb1#
您可以使用以下方法:
或
但这对你来说可能会很慢,所以如果你准备好付出这个代价,就好好决定吧。
qlvxas9a2#
你可以使用jQuery来轻松地完成这个任务,然后你可以使用类似下面的代码来处理类:
或
如果您希望它们是可切换的:
你需要在你的html中导入jQuery库来使用它,当然没有jQuery也可以这样做,但是我总是发现使用jQuery要容易得多,特别是它是一个如此普及的库。
这也要求你使用css类,这是你为了保持代码的可读性和可维护性而必须做的事情。
bmp9r5qi3#
你可以同时使用
HTML DOM querySelectorAll() Method
和CSS [attribute*=value] Selector
来拾取元素。然后用("object").style.attribute = "new value";
设置一个新的值。下面的例子有一个tr
,粉红色和黑色,但是javascript已经把它的颜色改为黄色+红色。第一个紫色/白色tr
仍然没有改变。xlpyo6sf4#
在您的问题中,您特别谈到了如何查找和替换设置为内联样式的颜色。
首先,我将添加有关最佳实践的强制性关注:您不应该使用内联样式。如果您使用的平台使用内联样式,您可能需要验证它是否在最新版本上,并积极维护,因为我们现在生活在2016年,特别是“平台”不应该在演示文稿中有发言权。它可能会提供建议和(适当的)默认值,什至通过具有高特异性选择器而使其难以覆盖,但是内联样式只能被其他内联样式覆盖,这就是为什么这是一种不好的做法。
好了,现在我们已经讨论过了,我知道你有问题,需要解决。
因为内联样式是使用属性设置的,所以我们可以使用属性选择器来挑选我们需要查看的元素。
为了选择与之匹配的元素,您有几个选项,例如 vanilla javascript:
或者,您可以使用 jQuery:
现在,这里有几个问题,因为最终您将需要评估
color
或background-color
是否匹配。结果发现部分/所有浏览器实际上已经将该值更改为该颜色的另一种表示形式(例如
rgb(...)
变体),这显然不匹配。在这种情况下,您最好获取原始属性值和正则表达式(由于我很懒,也不是jQuery的特别爱好者,所以我将跳过演示这种方法的jQuery等价物)