我正在尝试根据能够在 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>最佳答案
您很接近，但是您的代码存在一些问题。首先，您需要元素本身才能更改其属性；不是它的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>关于javascript - 更改存储的 div ID 的样式，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54300405/