堆栈内存溢出
  繁体   English   中英

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

[英]I am trying to change the style of a html link with javascript functions. Why does my code not work?

 原文  2019-03-13 14:00:15  4   4    javascript/ html

问题描述

在控制台中，我得到以下类型的错误：

ReferenceError：左侧的赋值无效

ReferenceError：未定义changeButtonOnMouseOver

这是我的代码： 

<!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>

我使链接看起来像一个按钮，并且我想使用用于onmouseover或onclick事件的javascript函数来更改样式，以便您看起来像在单击链接时按下了按钮，但我不知道为什么它不起作用。

4 个解决方案

解决方案1
 3  2019-03-13 14:12:55

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

 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>

解决方案2
 0  2019-03-13 14:19:26

您应该使用camelCase获得style属性。 只是删除-并且使文字后-大写如background-color => backgroundColor 。 对于-相同。 例如： 

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

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

您可以随意调用变量，但是有一定的局限性。 通常，您应该只使用拉丁字符（0-9，az，AZ）和下划线字符

您不应使用其他字符，因为它们可能会导致错误或难以为国际读者所理解

解决方案3
 0  2019-03-13 14:33:38

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

解决方案4
 0  2019-03-14 09:04:04

由于您无法添加/编辑CSS和使用类。 您可以使用JS创建一个包含所需样式的新style节点吗？ 

 const styleNode = document.createElement('style'); styleNode.type = 'text/css'; const cssStyles = ` #btn { 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:active { box-shadow: none; top: 5px; } `; styleNode.appendChild(document.createTextNode(cssStyles)); document.getElementsByTagName('head')[0].appendChild(styleNode); 
 <a id="btn" href="#">Zur Anmeldung</a>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 JS吊装功能。 （为什么此代码段有效？） JavaScript的。 用户功能方面的承诺。 为什么不起作用？ 如何在其他函数的函数下使用javascript中定义的变量。 以下是我的确切Javascript代码 为什么我的代码只能在html中工作，而在将其放入Javascript页面时却不能工作？ HTML和Javascript。 为什么我的代码不起作用 您可以使用javascript函数创建其他函数。 这是如何运作的？ 我正在尝试将 javascript 合并到我的 html 中，第一种方法效果很好，但第二种方法根本不起作用，但为什么呢？ 我正在尝试链接用JavaScript或HTML代码进行的选择，并将其链接到PHP变量。 我将如何去做呢？ 我正在尝试使用javascript更改链接的颜色并且它不起作用 为什么当我尝试将函数的返回值与字符串连接时我的代码不起作用？
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM