更改存储的 div ID 的样式答案

【问题标题】：Change style of stored div ID更改存储的 div ID 的样式
【发布时间】：2019-01-22 02:25:32
【问题描述】：

我正在尝试根据我能够在 javascript 函数中捕获的 div ID 更改一些样式属性。

当用户选择一个 div 时，javascript 会捕获它的 ID。当他们选择红色按钮时，无论选择哪个 div，它的背景颜色都应更改为红色。

我尝试了多种方法，但到目前为止我所采取的方法都没有奏效。

有什么想法吗？非常感谢任何和所有建议！

var sid;

function reply_click(clicked_id) {
  sid = clicked_id;
  console.log("Got ID!" + sid);
}

function btnRed() {
  console.log("Changed color for " + sid);
  sid.setProperty("background-color", "#ff4f4f");
}

body {
  maring: 0;
  poadding: 0;
}

#colorPreview {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  cursor: pointer;
  background-color: #fff;
}

#colorPreview2 {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  cursor: pointer;
  background-color: #fff;
}

button {
  cursor: pointer;
}

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style-hillbilly.css" />
</head>

<body>
  <div id="colorPreview" onclick="reply_click(this.id)"></div>
  <div id="colorPreview2" onclick="reply_click(this.id)"></div>

  <button class="bttn-1" onclick="btnRed()">Red</button>
</body>

</html>

【问题讨论】：

而不是sid.setProperty 使用document.getElementById(sid).style.backgroundColor = "#ff4f4f";

标签： javascript html css class

【解决方案1】：

您很接近，但您的代码存在一些问题。首先，您需要元素本身才能更改其属性；不是它的 ID。 this.id 应改为简单的 this。其次，您需要将sid.setProperty() 更改为sid.style.setProperty()。

这是您的代码，包含上述修复：

var sid;

function reply_click(clicked_id) {
  sid = clicked_id;
  console.log("Got ID!" + sid);
}

function btnRed() {
  console.log("Changed color for " + sid);
  sid.style.setProperty("background-color", "#ff4f4f");
}

body {
  maring: 0;
  poadding: 0;
}

#colorPreview {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  cursor: pointer;
  background-color: #fff;
}

#colorPreview2 {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  cursor: pointer;
  background-color: #fff;
}

button {
  cursor: pointer;
}

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style-hillbilly.css" />
</head>

<body>
  <div id="colorPreview" onclick="reply_click(this)"></div>
  <div id="colorPreview2" onclick="reply_click(this)"></div>

  <button class="bttn-1" onclick="btnRed()">Red</button>
</body>

</html>

【讨论】：

【解决方案2】：

sid是一个id，它只是一个字符串，不是一个函数，所以你不能调用sid。现在它是元素的id，我们可以找到document.getElementById()的元素。并且检查是否选择了任何 div 也是一个好习惯。

var sid;

function reply_click(clicked_id) {
  sid = clicked_id;
  console.log("Got ID!" + sid);
}

function btnRed() {
  console.log("Changed color for " + sid);
  //sid.setProperty("background-color", "#ff4f4f");
var doc = document.getElementById(sid)
if(doc){
doc.style.backgroundColor ="#ff4f4f"
}

}

body {
  maring: 0;
  poadding: 0;
}

#colorPreview {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  cursor: pointer;
  background-color: #fff;
}

#colorPreview2 {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  cursor: pointer;
  background-color: #fff;
}

button {
  cursor: pointer;
}

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style-hillbilly.css" />
</head>

<body>
  <div id="colorPreview" onclick="reply_click(this.id)"></div>
  <div id="colorPreview2" onclick="reply_click(this.id)"></div>

  <button class="bttn-1" onclick="btnRed()">Red</button>
</body>

</html>

【讨论】：

【解决方案3】：

这是工作代码。您不能使用元素的 id 来更改元素。您需要获取带有 ID 的元素。所以使用 this 而不是 this.id。

var selectedElem;

function reply_click(clickedElem) {
  selectedElem = clickedElem;
  console.log("Got ID!" + selectedElem.id);
}

function btnRed() {
  console.log("Changed color for " + selectedElem.id);
  selectedElem.style.setProperty("background-color", "#ff4f4f");
}

body {
  maring: 0;
  poadding: 0;
}

#colorPreview {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  cursor: pointer;
  background-color: #fff;
}

#colorPreview2 {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  cursor: pointer;
  background-color: #fff;
}

button {
  cursor: pointer;
}

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style-hillbilly.css" />
</head>

<body>
  <div id="colorPreview" onclick="reply_click(this)"></div>
  <div id="colorPreview2" onclick="reply_click(this)"></div>

  <button class="bttn-1" onclick="btnRed()">Red</button>
</body>

</html>

【讨论】：