Question

我正在尝试根据我已经能够在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>

Answer 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>

Answer 2

sid是一个id，它只是一个字符串，而不是一个函数，因此您不能调用sid。现在它是element的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>

Answer 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>

更改存储的div ID的样式

3 个答案: