如何使用Javascript根据元素的颜色更改ID

我试着自己学习javascript，所以我缺少很多东西。我试图根据另一个元素的css中的颜色来更改多个元素的颜色

我希望javascript检测具有特定颜色的

，然后更改另一个

的id

我试过这个：

if（document.getElementById（“name”）.css（“color”）==“7a5cd4”）{
document.getElementById（'border'）.setAttribute（'id'，'red'）；
document.getElementById（'line'）.setAttribute（'id'，'linered'）；
}

#名称{
字体大小：35px；
颜色：#7a5cd4；
}
#边界{
宽度：25px；
高度：25px；
边框：3倍纯黑；
填充：10px；
利润率：10px；
边界半径：100%
}
#红色的{
宽度：25px；
高度：25px；
边框：3倍纯红；
填充：10px；
利润率：10px；
边界半径：100%
}
#线{
宽度：200px；
高度：20px；
边框：1px纯黑
}
#线条{
宽度：200px；
高度：20px；
边框：1px纯红
}

名称

.css（）

不是普通的JS函数。改用

.style.cssprropertyName

if (document.getElementById("name").style.color === "#7a5cd4") {

  document.getElementById('border').setAttribute('id', 'red');
  document.getElementById('line').setAttribute('id', 'linered');

}

.css（）

不是普通的JS函数。改用

.style.cssprropertyName

if (document.getElementById("name").style.color === "#7a5cd4") {

  document.getElementById('border').setAttribute('id', 'red');
  document.getElementById('line').setAttribute('id', 'linered');

}

---

要更改元素的id，请执行以下操作：

document.getElementById('oldid').id = 'newid'

此答案的其余部分适合内联样式（element style=“color:value”），而@BenjaminDavies答案更适合您的原始问题：

要检查/更改颜色属性，请执行以下操作：

var divOldColor = document.getElementById('oldid').style.color; // get the color to variable
if (divOldColor == '#7a5cd4') { // do something }

把它们放在一起，我们可以得到如下结果：

if (document.getElementById('name').style.color == '#7a5cd4') {
  document.getElementById('border').id = 'red';
  document.getElementById('line').id = 'linered';
}

---

要更改元素的id，请执行以下操作：

document.getElementById('oldid').id = 'newid'

此答案的其余部分适合内联样式（element style=“color:value”），而@BenjaminDavies答案更适合您的原始问题：

要检查/更改颜色属性，请执行以下操作：

var divOldColor = document.getElementById('oldid').style.color; // get the color to variable
if (divOldColor == '#7a5cd4') { // do something }

把它们放在一起，我们可以得到如下结果：

if (document.getElementById('name').style.color == '#7a5cd4') {
  document.getElementById('border').id = 'red';
  document.getElementById('line').id = 'linered';
}

是一个函数，它将元素作为参数，并返回一个包含该对象上使用的所有样式的对象。然后，我们可以对结果调用

getPropertyValue

，以获取css属性的值

这些函数以

rgb（r，g，b）

的形式返回颜色，因此我们需要将值与

rgb（122，92，212）

进行比较，而不是

#7a5cd4

但是，它在您的情况下不起作用，因为它只获取内联样式，即在html中指定样式时，如

此外，建议使用类来选择元素，而不是ID，因为您可以在同一个元素上放置多个类

const-element=document.getElementById（'name'）；
const styles=window.getComputedStyle（元素）；
if（styles.getPropertyValue（'color'）=='rgb（122、92、212）'{
document.getElementById（'border'）.setAttribute（'id'，'red'）；
document.getElementById（'line'）.setAttribute（'id'，'linered'）；
}

是一个函数，它将元素作为参数，并返回一个包含该对象上使用的所有样式的对象。然后，我们可以对结果调用

getPropertyValue

，以获取css属性的值

这些函数以

rgb（r，g，b）

的形式返回颜色，因此我们需要将值与

rgb（122，92，212）

进行比较，而不是

#7a5cd4

但是，它在您的情况下不起作用，因为它只获取内联样式，即在html中指定样式时，如

此外，建议使用类来选择元素，而不是ID，因为您可以在同一个元素上放置多个类

const-element=document.getElementById（'name'）；
const styles=window.getComputedStyle（元素）；
if（styles.getPropertyValue（'color'）=='rgb（122、92、212）'{
document.getElementById（'border'）.setAttribute（'id'，'red'）；
document.getElementById（'line'）.setAttribute（'id'，'linered'）；
}