gpt4 book ai didi

javascript - 无法读取未定义的属性 'fontSize'

转载 作者:太空宇宙 更新时间:2023-11-04 16:21:33 25 4
gpt4 key购买 nike

<!DOCTYPE HTML>
<html>
<head>
<title>Javascript</title>
<link id="mycss" rel="stylesheet" href="mycss.css">
<script>

function resize(s) {
var styleSheet = document.getElementById('mycss').href;
if (styleSheet.style.fontSize == '2.0em') {
styleSheet.style.fontSize = parseFloat(styleSheet.style.fontSize) + (s * 0.2) + "em";
}else if(styleSheet.style.fontSize == '3.0em'){
styleSheet.style.fontSize = parseFloat(styleSheet.style.fontSize) + (s * 0.3) + "em";
}


}

</script>
</head>
<body id="theBody" class="theBod">
<h1 id = "h1" onclick="clickChange();">Hello</h1>
<p id="para1" class="para1" onclick="resize(1);">Here is some text of one size (click)<p>
<p id="para2" class="para2" onclick="resize(2)">More text of another size (click)<p>
<p id ="demo" onclick="countToNum()"> Numbers (Click me): </p>
</body>
</html>

我正在尝试获取它,以便在单击元素时,元素内容的大小会根据 onclick 函数中指定的参数增加。我正在使用外部样式表

#para1 {
font-size: 2.0em;
}

#para2{
font-size: 3.0em;
}

这就是外部样式表中的全部内容。我只希望 javascript 做出响应,并且只使单击的元素变大,而另一个元素保持不变。我一直收到错误消息:无法读取未定义的属性“fontSize”

我真的不擅长 javascript,所以非常感谢帮助。

最佳答案

要点:

I just want the javascript to respond and only make the element that is clicked larger

为此,您根本不想访问样式表;相反,只需访问被点击元素的样式信息:

<p onclick="resize(this)">...</p>

然后

function resize(element) {
var elementStyle = element.currentStyle || getComputedStyle(element);
// Read elementStyle.fontSize here, set element.style.fontSize to change it
}

关于您问题中的代码:这一行:

var styleSheet = document.getElementById('mycss').href;

为您提供一个包含样式表 URL 的字符串。它不会给你样式表。字符串没有 style 属性,因此 styleSheet.styleundefined,并且 styleSheet.style.fontSize失败,因为您试图从 undefined 中读取属性。

如果您想访问样式表信息,您需要在document.styleSheets collection 中找到样式表。 .

或者,根据HTML5规范,HTMLLinkElement实现 LinkStyle interface由 CSSOM 定义,这表明在兼容的浏览器上您可以使用它来获取样式表:

var styleSheet = document.getElementById('mycss').sheet;

我没有亲自这样做,只是遵循了规范中的信息。

关于javascript - 无法读取未定义的属性 'fontSize',我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28881160/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com