JavaScript onMouseover边框颜色更改功能删除边框

Question

我已经做出了一个函数以更改边框的颜色，但是由于某种原因，它在不更改颜色的情况下删除了边框，因此我无法更改颜色后退。在这里是：

function borderChange(id, color) 
        {
            document.getElementById(id).style.border = color;
        }

<div class="menu" id="menu1" onmouseover="borderChange(this.id, 'White');" onmouseout="borderChange(this.id, 'Black');"> Text </div> 

Answer 1

使用border速记属性时，如果您没有指定宽度和样式，则它们默认为0和none…此时，颜色是什么都没关系。

改为设置border-color属性。

function borderChange(id, color) {
  document.getElementById(id).style.borderColor = color;
}

div { border: solid red 1px; }
body { background: blue; }

<div class="menu" id="menu1" onmouseover="borderChange(this.id, 'White');" onmouseout="borderChange(this.id, 'Black');"> Text </div>

---

旁边…

传递元素的ID，然后立即通过其ID获取元素是毫无意义的。只需通过元素本身即可。

function borderChange(element, color) {
  element.style.borderColor = color;
}

div { border: solid red 1px; }
body { background: blue; }

<div class="menu" id="menu1" onmouseover="borderChange(this, 'White');" onmouseout="borderChange(this, 'Black');"> Text </div>

同样，使用JavaScript对此进行了过多。您可以只使用CSS。

div { border: solid red 1px; }
div:hover { border-color: white; }
body { background: blue; }

<div class="menu" id="menu1"> Text </div>

Answer 2

边框被删除，因为您的代码被写成覆盖border样式。

您应该只更改border-color，而不是border样式。

更多关于border。

function borderChange(id, color) 
{
    document.getElementById(id).style.borderColor = color;
}

#menu1 {
  border: 1px solid black;
}

<div class="menu" id="menu1" onmouseover="borderChange(this.id, 'White');" onmouseout="borderChange(this.id, 'Black');"> Text </div>