单击标签时，我需要更改 HTML 中 div 内的图像。我认为我不需要为此使用 jquery，我只想使用 javascript。经过一些研究，它看起来很简单，所有的答案都是一样的，但我无法让它发挥作用。我知道单击标签时该功能有效，因为标签会改变颜色，但图像不会改变，我也没有收到任何语法错误。我正在使用铬。我不知道我做错了什么。这是 HTML/CSS 代码：<html><body> <div id="slc_on_label"> <img src=https://ichef.bbci.co.uk/news/800/cpsprodpb/12A9B/production/_111434467_gettyimages-1143489763.jpg> </div> <style> #slc_on_label img { position:fixed; width:5.5%; left:10%; top:10%; } </style> <label class = "button" id="button" onclick="run(this)">0</label> <style> .button {background-color:Powderblue; font-size: 5vw; } </style> <script src="question.js" ></script></body></html>这是javascript代码：function run(button) { document.getElementById("slc_on_label").src="https://cdn.pixabay.com/photo/2016/12/13/05/15/puppy-1903313_1280.jpg"; button.style = "background-color:red";}
3 回答
一只斗牛犬
TA贡献1784条经验 获得超2个赞
您正在尝试将src属性设置为 on<div id="slc_on_label">而不是在<img>其内部。
您可以使用document.querySelector()选择里面的图像div：
document.querySelector("#slc_on_label img").src =
"https://cdn.pixabay.com/photo/2016/12/13/05/15/puppy-1903313_1280.jpg";
慕田峪4524236
TA贡献1875条经验 获得超5个赞
<html>
<head>
<style>
#slc_on_label img {
position: fixed;
width: 5.5%;
left: 10%;
top: 10%;
}
.button {
background-color: Powderblue;
font-size: 5vw;
}
</style>
</head>
<body>
<div id="slc_on_label">
<img src="https://ichef.bbci.co.uk/news/800/cpsprodpb/12A9B/production/_111434467_gettyimages-1143489763.jpg">
</div>
<label class="button" id="button" onclick="run(this)">0</label>
<script>
function run(button) {
document.querySelector("#slc_on_label img").setAttribute('src', 'https://cdn.pixabay.com/photo/2016/12/13/05/15/puppy-1903313_1280.jpg');
button.style = "background-color:red";
};
</script>
</body>
</html>
DIEA
TA贡献1820条经验 获得超2个赞
function run(button) {
document.querySelector('slc_on_label img').src =
'https://cdn.pixabay.com/photo/2016/12/13/05/15/puppy-1903313_1280.jpg';
button.style.backgroundColor = 'red';
}
也不破坏按钮样式。
添加回答
举报
0/150
提交
取消