Question

我正在尝试使用 javascript 函数更改 html 链接的样式。为什么我的代码不起作用？

2019-03-13

80

javascript html

在控制台中，我得到了这些类型的错误：

ReferenceError: invalid assignment left-hand side

ReferenceError: changeButtonOnMouseOver is not defined

这是我的代码：

<!DOCTYPE html>
<html>
<body>
<br />
<br />
<br />
<br />

<script>
    function changeButtonOnMouseOver()
    {
        document.getElementById("btn").style.background-color = "#00806f";
        document.getElementById("btn").style.cursor = "pointer";
    }
    function changeButtonOnClick()
    {
        document.getElementById("btn").style.box-shadow = "none";
        document.getElementById("btn").style.top = "5px";
    }
    function changeButtonOnMouseOut()
    {
        document.getElementById("btn").style.border-radius = "15px";
        document.getElementById("btn").style.background-color = "#009682";
        document.getElementById("btn").style.box-shadow = "0 5px 0 #00332c";
        document.getElementById("btn").style.color = "white";
        document.getElementById("btn").style.cursor = "auto";
        document.getElementById("btn").style.padding = "1em 1.5em";
        document.getElementById("btn").style.position = "relative";
        document.getElementById("btn").style.text-align = "center";
        document.getElementById("btn").style.text-decoration = "none";
        document.getElementById("btn").style.font-size = "x-large";
        document.getElementById("btn").style.font-weight = "800";
        document.getElementById("btn").style.outline = "none";
        document.getElementById("btn").style.border = "none";
    }
</script>

<a id="btn" href="#" onmouseover="changeButtonOnMouseOver()" onclick="changeButtonOnClick()" onmouseout="changeButtonOnMouseOut()"

style="border-radius: 15px;
  background-color: #009682;
  box-shadow: 0 5px 0 #00332c;
  color: white;
  padding: 1em 1.5em;
  position: relative;
  text-align: center;
  text-decoration: none;
  font-size: x-large;
  font-weight: 800;
  outline: none;
  border: none;" >

  Zur Anmeldung</a>

</body>
</html>

我把链接做成一个按钮，我想用 JavaScript 函数改变 onmouseover 或 onclick 事件的样式，这样当你点击链接时看起来就像按下了一个按钮，但我不知道为什么它不起作用。

Answer 1

您应该在 JavaScript 中使用 camelCase 属性名称作为样式：

function changeButtonOnMouseOver(){
  document.getElementById("btn").style.backgroundColor = "#00806f";
  document.getElementById("btn").style.cursor = "pointer";
}
function changeButtonOnClick(){
  document.getElementById("btn").style.boxShadow = "none";
  document.getElementById("btn").style.top = "5px";
}
function changeButtonOnMouseOut(){
  document.getElementById("btn").style.borderRadius = "15px";
  document.getElementById("btn").style.backgroundColor = "#009682";
  document.getElementById("btn").style.boxShadow = "0 5px 0 #00332c";
  document.getElementById("btn").style.color = "white";
  document.getElementById("btn").style.cursor = "auto";
  document.getElementById("btn").style.padding = "1em 1.5em";
  document.getElementById("btn").style.position = "relative";
  document.getElementById("btn").style.textAlign = "center";
  document.getElementById("btn").style.textDecoration = "none";
  document.getElementById("btn").style.fontSize = "x-large";
  document.getElementById("btn").style.fontWeight = "800";
  document.getElementById("btn").style.outline = "none";
  document.getElementById("btn").style.border = "none";
}

<a id="btn" href="#" onmouseover="changeButtonOnMouseOver()" onclick="changeButtonOnClick()" onmouseout="changeButtonOnMouseOut()" style="border-radius: 15px;background-color: #009682;box-shadow: 0 5px 0 #00332c;color: white;padding: 1em 1.5em;position: relative;text-align: center;text-decoration: none;font-size: x-large;font-weight: 800;outline: none;border: none;">Zur Anmeldung</a>

您可以使用纯 CSS 实现相同的效果：

function changeButtonOnClick(){
  document.getElementById("btn").style.boxShadow = "none";
  document.getElementById("btn").style.top = "5px";
}

#btn, #btn:not(:hover){
  border-radius: 15px;
  background-color: #009682;
  box-shadow: 0 5px 0 #00332c;
  color: white;
  padding: 1em 1.5em;
  position: relative;
  text-align: center;
  text-decoration: none;
  font-size: x-large;
  font-weight: 800;
  outline: none;
  border: none;
}
#btn:hover{
  background-color: #00806f;
  cursor: pointer;
}
#btn:not( :hover ){ 
  border-radius: 15px;
  background-color: #009682;
  box-shadow: 0 5px 0 #00332c;
  color: white;
  padding: 1em 1.5em;
  position: relative;
  text-align: center;
  text-decoration: none;
  font-size: x-large;
  font-weight: 800;
  outline: none;
  border: none;
}

<a id="btn" href="#" onclick="changeButtonOnClick()" >
Zur Anmeldung</a>

Answer 2

您应该将 style 的属性改为驼峰式命名。只需删除 - 并将 - 后面的字母改为大写即可，例如 background-color => backgroundColor 。对于 - 也是如此。例如：

background-color => backgroundColor
border-left-width => borderLeftWidth

请参阅 关于变量命名规则的补充 。

You can call a variable pretty much anything you like, but there are limitations. Generally, you should stick to just using Latin characters (0-9, a-z, A-Z) and the underscore character

You shouldn't use other characters because they may cause errors or be hard to understand for an international audience

Answer 3

您的脚本在 id btn 存在于 DOM 之前就已加载。您应该在声明 id 之后放置脚本，或者将脚本设置为在 DOM 完全构建后加载