Question

我尝试使用 querySelector 更改背景颜色但它不起作用，是否有问题或有其他更有效的方法？

<ul class="thumb">
  <li><img src="images/thumb1.png" onclick="imgSlider('images/img1.png');changeCircleColor('#017143')"></li>
  <li><img src="images/thumb2.png" onclick="imgSlider('images/img2.png');changeCircleColor('#eb7495')"></li>
  <li><img src="images/thumb3.png" onclick="imgSlider('images/img3.png');changeCircleColor('#d752b1')"></li>
</ul>

<script type="text/javascript">
  function imgSlider(anything) {
    document.querySelector('.starbucks').src = anything;
  }
  
  function changeCircleColor(color) {
    const circle = documennt.querySelector('.circle');
    circle.style.background = color;
  }
</script>

.circle{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #017143;
  clip-path: circle(600px at right 800px);
}

Answer 1

你打错了。是document，不是documennt。

<ul class="thumb">
        <li><img src="images/thumb1.png" onclick="imgSlider('images/img1.png');changeCircleColor('#017143')"></li>
        <li><img src="images/thumb2.png" onclick="imgSlider('images/img2.png');changeCircleColor('#eb7495')"></li>
        <li><img src="images/thumb3.png" onclick="imgSlider('images/img3.png');changeCircleColor('#d752b1')"></li>
    </ul>
<script  type="text/javascript">
function imgSlider(anything){
    document.querySelector('.starbucks').src = anything;
}
function changeCircleColor(color){
    const circle = document.querySelector('.circle');
    circle.style.background = color; 
}
</script>

使用 queryselector 通过单击更改背景颜色

1 个答案: