Question

我是如此失败我准备遭受任何滥用，以找出为什么我不能做一些简单的事情，让onload函数告诉我身体字体大小是20pt。我一直在看，直到我的眼睛流血，除了我之外的所有人似乎都能让下面的剧本工作。

但我的＃@！/％＃！代码呕吐一个警告框，其中包含以下内容:(我使用了两行来确定它不是一个案例问题）

[  ]
[undefined]

实际上，我的目标是使用在head部分或onload中执行的scritp来读取屏幕宽度，并按公式设置正文字体大小。 [下一步尝试将body标签从代码中删除，并将脚本document.write（）放在body标签中，样式规格设置正文字体大小。以下这应该只是一个热身运动。]任何和所有的帮助表示赞赏。

<html>
  <head>
    <style>
      body {font-size:20pt;color:white;font-weight:bold;background:grey;}
    </style>

    <script type="text/javascript">
      onload=function(){
        alert("[ " + document.getElementsByTagName("body")[0].style.fontSize +" ]"
           +"\n[ " + document.getElementsByTagName("body")[0].style.fontsize + " ]");
      }
    </script>
  </head>
  <body>
    <div>Test Text</div>
  </body>
</html>

以下是我在以下评论的帮助下得到的。

这两个都返回字体大小。

getComputedStyle(document.body).fontSize
getComputedStyle(document.body).getPropertyValue('font-size')

但他们在设置字体大小时会抛出错误

getComputedStyle(document.body).fontSize = "30pt";
getComputedStyle(document.body).setProperty("fontSize", "25pt", "important") ;

另一方面，这些都设置了新的字体大小

document.body.style.fontSize = "200%";
document.getElementsByTagName("body")[0].style.fontSize = "400%";

但是当他们要求字体大小时，他们都会返回一串长度为0的字符串。

document.body.style.fontSize 
document.getElementsByTagName("body")[0].style.fontSize

这是一个onload函数，用于确认：

 onload=function(){
   var msg = "onload:\n";
   /* these both return font size.*/
   msg += "1. [ " + getComputedStyle(document.body).fontSize + "]\n";
   msg += "2. [ " + getComputedStyle(document.body).getPropertyValue('font-size') + "]\n";
   /* these both return a string of lenght 0.*/
   msg += "3. [ " + document.body.style.fontSize + "]\n"; 
   msg += "4. [ " + document.getElementsByTagName("body")[0].style.fontSize + "]\n"; 
     /*these both throw errors*/
     try { getComputedStyle(document.body).fontSize = "30pt";
   } catch (err) { msg += "5. [" + err.message + "]\n"; }
   try {getComputedStyle(document.body).setProperty("fontSize", "25pt", "important") ;
   } catch (err) { msg += "6. [" + err.message + "]\n"; }
   /*these both set new font size*/
   alert(msg);
   document.body.style.fontSize = "200%";
   setTimeout(function(){document.getElementsByTagName("body")[0].style.fontSize = "400%"},1500);
 }

显然我缺少一些东西，但是现在这个有用了。圣诞快乐

Answer 1

您可以使用document.body而不必使用getElementsByTagName。
fontsize是不正确的大写字母;这就是为什么你的第二个提醒正在返回undefined。
如果您想要CSS 指定的元素的字体大小，则必须使用getComputedStyle：

alert(getComputedStyle(document.body).getPropertyValue('font-size')); // => "20pt"

请参阅the MDN docs for getComputedStyle here。

Answer 2

Javascript无法读取CSS。你需要做的是定义你的字体大小内联，以便Javascript可以理解它。当您输入：

document.getElementsByTagName("body")[0].style.fontSize

首先是指DOM中的元素。样式是该元素的属性，并且在使用样式表样式时，样式的格式不同，而不是属性。所以你需要做的是：

<body style='font-size:20px'>
<!-- content -->
</body>

element.style.fontSize不返回大小

2 个答案: