Question

我正在尝试自己学习javascript，因此我缺少很多东西。我正在尝试根据另一个元素的css中的颜色更改倍数元素的颜色。

我希望javascript检测到特定颜色的<div id>，然后更改另一个<div id2>的id

我尝试过这个：

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

#name {
  font-size: 35px;
  color: #7a5cd4;
}

#border {
  width: 25px;
  height: 25px;
  border: 3px solid black;
  padding: 10px;
  margin: 10px;
  border-radius: 100%
}

#red {
  width: 25px;
  height: 25px;
  border: 3px solid red;
  padding: 10px;
  margin: 10px;
  border-radius: 100%
}

#line {
  width: 200px;
  height: 20px;
  border: 1px solid black
}

#linered {
  width: 200px;
  height: 20px;
  border: 1px solid red
}

<center>
  <div id="name">name</div>

  <div id="border"></div>
  <div id="line"></div>
</center>

Answer 1

为了更改元素的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';
}

Answer 2

window.getComputedStyle是一个函数，该函数将元素作为参数并返回一个对象，其中包含该对象上正在使用的所有样式。然后，我们可以对结果调用getPropertyValue以获取css属性的值。

这些函数以rgb(r, g, b)的形式返回颜色，因此我们需要将值与rgb(122, 92, 212)而不是#7a5cd4进行比较。

HTMLElement.style在您的情况下不起作用，因为它只能获取内联样式，这是在您的html中指定样式时，例如<div style="color: red">。

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

const element = document.getElementById('name');
const styles = window.getComputedStyle(element);

if (styles.getPropertyValue('color') == 'rgb(122, 92, 212)') {

  document.getElementById('border').setAttribute('id', 'red');
  document.getElementById('line').setAttribute('id', 'linered');

}

Answer 3

.css()不是普通的JS函数。请改用.style.cssPropertyName。

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

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

}

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

3 个答案: