Question

<!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响应，只使得点击的元素更大而另一个元素保持不变。我一直收到错误：无法读取属性＆＃39; fontSize＆＃39;未定义的

我在javascript上真的很差，所以非常感谢帮助。

Answer 1

要点：

我只想让javascript响应，只让点击的元素更大

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

<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.style为undefined，而styleSheet.style.fontSize失败，因为您尝试从undefined读取属性。

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

或，根据HTML5规范，HTMLLinkElement实现了CSSOM定义的LinkStyle interface，这表明在符合标准的浏览器上，您可以使用它来获取样式表：< / p>

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

我没有亲自这样做，只是按照规范中的信息。

Answer 2

不要试图访问样式表，只需动态重置字体大小：

function resize(element, resizeFactor) {
    var elem = document.getElementById(element);
    var currentSize = parseInt(elem.style.fontSize, 10);
    var newSize = currentSize + resizeFactor;
    elem.style.fontSize = newSize + "px";
}

您当前的代码是（我假设）尝试从外部CSS样式表中获取当前大小，但您没有正确访问样式表：document.getElementById('mycss').href返回样式表的URL字符串而不是样式表本身。为此，您应该使用document.styleSheets - 请参阅here以获得一个好的教程。

基本上，您可以使用document.styleSheets[index]获取样式表对象，然后使用this.addRule()向其添加CSS规则。

无法阅读属性＆＃39; fontSize＆＃39;未定义的

2 个答案: