如何使用javascript显示/隐藏边框

问题描述 投票:0回答:1

我有10个不同颜色的方盒。我正在尝试显示用户单击的正方形的边框,并隐藏上一个正方形的边框。到目前为止,我已经拥有了,但是我却以某种方式获得了Cannot read property 'style' of null。我的想法是隐藏当前的框边框,然后为用户单击的新框显示边框。

var currentBoxNum = 1;

function changeColor(background, boxNum) {
  document.getElementById("box" + currentBoxNum).style.borderStyle = "none";
  currentBoxNum = boxNum;
  document.getElementById("box" + currentBoxNum).style.borderStyle = "solid";
}
<div class="colors">
  <div id="box1"></div>
  <div id="box2"></div>
  <div id="box3"></div>
  <div id="box4"></div>
  <div id="box5"></div>
  <div id="box6"></div>
  <div id="box7"></div>
  <div id="box8"></div>
  <div id="box9"></div>
</div>

box1.onclick = function() { changeColor("#e6e2cf",1); }
box2.onclick = function() { changeColor("#dbcaac",2); }
box3.onclick = function() { changeColor("#c9cbb3",3); }
box4.onclick = function() { changeColor("#bbc9ca",4); }
box5.onclick = function() { changeColor("#a6a5b5",5); }
box6.onclick = function() { changeColor("#b5a6ab",6); }
box7.onclick = function() { changeColor("#eccfcf",7); }
box8.onclick = function() { changeColor("#eceeeb",8); }
box9.onclick = function() { changeColor("#bab9b5",9); }
javascript html css
1个回答
0
投票

您正在打电话

document.getElementById("cb").style.backgroundColor = background;

没有id"cb"的元素。

更新代码以正确引用要更改其背景颜色的元素的id

© www.soinside.com 2019 - 2024. All rights reserved.