在addEventListener中：无法访问属性"font"，因为element.style未定义

我有一个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，表示它无法访问属性"；字体"因为element.style未定义。

所以我的猜测是，当这个脚本加载时，JS试图运行一次函数来测试错误或其他事情，但由于根本没有元素，所以在执行addEventListener语句之前会发生错误。但我绝对不确定

非常感谢任何帮助

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

事件不是onmouseover，而是mouseover
则CCD_ 4立即调用CCD_

然后在函数中，参数不是元素，而是事件对象。所以这就是为什么element.style没有被定义的原因。element并不像你想的那样是元素。请改用this；(

这是你修改的剧本。我添加了绑定到restoreFontSize函数的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>

希望这能帮助

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>

试试这个：

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)立即调用函数，您当前的实现相当于

quest1Title.addEventListener('onmouseover', undefined);

undefined为increaseFontSize(this)

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是一个函数，事件本身没有"；在"上"；。鼠标悬停、单击等等。

当您将函数回调分配给侦听器时，不需要分配已经添加的this，所以只需编写不带括号的函数名increaseFontSize。

至于样式，请使用fontSize。

最后，是什么调用了侦听器？事件，因此事件实际上是传递给函数的值。从那里可以通过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>

相关内容

最新更新

热门标签：