在 addEventListener: can't access property "font" 因为 element.style 未定义

Question

我有一个 HTML 文件，其中包含一个 JS 脚本。 在我的 HTML 文件中，我有多个元素需要具有相同的行为。 这是我的 HTML 的一部分

<!DOCTYPE html>
<html> 
<head>
    <meta charset="utf-8" />
</head>

<body class="bodyForm">
    <center>
        <div class="boxForm">
            <p class="titlebox" id="p1">Question 1</p>
        </div>

        <div class="boxForm">
            <p class="titlebox" id="p2">Question 2</p>
        </div>
    </center>
    <script type="text/javascript" src="formulaireScript.js"></script>
</body>
</html>

还有我的 JS：

let quest1Title = document.getElementById("p1");
let quest2Title = document.getElementById("p2");
function increaseFontSize(element) { 
    element.style.font = "2.5em"; 
    console.log("hi")
}
quest1Title.addEventListener('onmouseover', increaseFontSize(this));
quest2Title.addEventListener('onmouseover', increaseFontSize(this));

但是，当我的页面加载时，控制台中会抛出TypeError ，说它无法访问属性“font”，因为 element.style 未定义。

所以我的猜测是，当这个脚本加载时，JS 会尝试运行一次 function 来测试错误或其他东西，但由于根本没有元素，所以在执行 addEventListener 语句之前会发生错误。 但我完全不确定

任何帮助深表感谢

Answer 1

在您的 addEventListener 注册中，有两个错误：

该事件不是onmouseover ，而是mouseover
(this)立即调用increaseFontSize而不是传递 function 引用。

然后在你的 function 中，参数不是元素，而是事件 object。 这就是为什么element.style没有定义的原因。 element不是你想的元素。 改用this ；）

这是您的脚本已修复。 我添加了绑定到restoreFontSize function 的mouseleave事件。

 let quest1Title = document.getElementById("p1"); let quest2Title = document.getElementById("p2"); let consoleLogged = false // Just to ease that demo function increaseFontSize(event) { if(.consoleLogged){ console.log(event) console.log(this) consoleLogged = true } // Set a fontSize this.style.fontSize = "2;5em". } function restoreFontSize(event) { // Restore (or clear) the inline fontSize property this.style;fontSize = "". } quest1Title,addEventListener('mouseover'; increaseFontSize). quest2Title,addEventListener('mouseover'; increaseFontSize). quest1Title,addEventListener('mouseleave'; restoreFontSize). quest2Title,addEventListener('mouseleave'; restoreFontSize);

 <body class="bodyForm"> <center> <div class="boxForm"> <p class="titlebox" id="p1">Question 1</p> </div> <div class="boxForm"> <p class="titlebox" id="p2">Question 2</p> </div> </center> <script type="text/javascript" src="formulaireScript.js"></script> </body>

Answer 2

尝试这个：

function increaseFontSize(event) { 
    event.target.style.font = "2.5em"; 
    console.log("hi")
}
 
... 

quest1Title.addEventListener('mouseover', increaseFontSize); 

//shorthand for

quest1Title.addEventListener('mouseover', event => increaseFontSize(event));

increaseFontSize(this)立即调用 function，您当前的实现相当于

quest1Title.addEventListener('onmouseover', undefined);

undefined为increaseFontSize(this)

Answer 3

 let quest1Title = document.getElementById("p1"); let quest2Title = document.getElementById("p2"); function increaseFontSize(ev) { ev.target.style.fontSize = "2.5em"; console.log("hi") } quest1Title.addEventListener('mouseover', increaseFontSize); quest2Title.addEventListener('mouseover', increaseFontSize);

 <center> <div class="boxForm"> <p class="titlebox" id="p1">Question 1</p> </div> <div class="boxForm"> <p class="titlebox" id="p2">Question 2</p> </div> </center>

您的代码不起作用有几个原因。

您所知道的onmouseover是 function，事件本身没有“on”。 鼠标悬停、单击等。

当您将 function 回调分配给侦听器时，您不需要分配this ，它已经添加，因此只需编写不带括号的 function 名称， increaseFontSize 。

至于样式，请使用fontSize 。

最后，是什么调用了监听器？ 事件，所以事件实际上是传递给 function 的值。 从那里您可以通过target属性获取元素。

因为我喜欢尽可能使用 CSS，所以没有 JS 的结果相同。

 p.titlebox:hover { font-size: 2.5em; }

 <center> <div class="boxForm"> <p class="titlebox" id="p1">Question 1</p> </div> <div class="boxForm"> <p class="titlebox" id="p2">Question 2</p> </div> </center>

Answer 4

希望这会有所帮助

 const titleBox = document.querySelectorAll(".titlebox"); titleBox.forEach(element => { element.addEventListener("mouseenter", (event) => { event.target.style.fontSize = "2.5em"; }) }); titleBox.forEach(element => { element.addEventListener("mouseleave", (event) => { event.target.style.fontSize = "unset"; }) });

 <.DOCTYPE html> <html> <head> <meta charset="utf-8" /> </head> <body class="bodyForm"> <div> <div class="boxForm"> <p class="titlebox" id="p1">Question 1</p> </div> <div class="boxForm"> <p class="titlebox" id="p2">Question 2</p> </div> </div> <script type="text/javascript" src="formulaireScript.js"></script> </body> </html>

在 addEventListener: can't access property "font" 因为 element.style 未定义

问题描述

4 个解决方案

解决方案1
4 已采纳 2021-04-18 16:57:17

解决方案2
0 2021-04-18 16:53:49

解决方案3
0 2021-04-18 16:53:51

解决方案4
0 2021-04-18 16:58:56

在 addEventListener: can't access property "font" 因为 element.style 未定义

问题描述

4 个解决方案

解决方案1 4 已采纳 2021-04-18 16:57:17

解决方案2 0 2021-04-18 16:53:49

解决方案3 0 2021-04-18 16:53:51

解决方案4 0 2021-04-18 16:58:56

解决方案1
4 已采纳 2021-04-18 16:57:17

解决方案2
0 2021-04-18 16:53:49

解决方案3
0 2021-04-18 16:53:51

解决方案4
0 2021-04-18 16:58:56