Question

我是一般的编程新手。我正在学习HTML / CSS / Javascript atm。

我创建了一个简单的脚本，允许用户更改段落元素的字体大小。

我厌倦了我的代码是jsFiddle并且它工作正常，但当我将其复制到HTML文档并启动页面时。 HTML和CSS运行正常，但问题是：JavaScript无法运行。顺便说一句，我使用的是Chrome浏览器。

我的HTML文档有问题..？我很困惑！

这是工作的jsFiddle：https://jsfiddle.net/o60gtvh8/

我的HTML文件（下载链接/ Dropbox）： https://www.dropbox.com/s/tl0npr5omefntv4/Font%20size%20changer.rar?dl=0

HTML文件代码（上面下载链接中提供的HTML文件中的代码副本）：

<!doctype html>
<html>
<head>
<style>
h1 {
  color: blue;
  font-size: 25px;
  margin: 10px;
}

h2 {
  color: blue;
  font-size: 15px;
  margin: 10px;
}

p {
  margin: 10px;
}

a {
  margin: 10px;
  font-size: 15px;
  text-decoration: none;
  border: 1px solid grey;
  background-color: cyan;
  color: black;
  padding: 3px;
}
</style>

<script>
function sizeChanger(size) {
  return function() {
    document.body.style.fontSize = size + 'px';
  };
}
var size10 = sizeChanger(10);
var size20 = sizeChanger(20);
var size30 = sizeChanger(30);

document.getElementById('size-10px').onclick = size10;
document.getElementById('size-20px').onclick = size20;
document.getElementById('size-30px').onclick = size30;
</script>
</head>

<body>
<h1>Tiger</h1>
<h2>(From Wikipedia, the free encyclopedia)</h2>
<p>The tiger (Panthera tigris) is the largest cat species, most recognizable for
their pattern of dark vertical stripes on reddish-orange fur with a lighter underside.
The species is classified in the genus Panthera with the lion, leopard, jaguar, and snow leopard.
</p>
<a href="#" id="size-10px">Font size 10</a>
<a href="#" id="size-20px">Font size 20</a>
<a href="#" id="size-30px">Font size 30</a>
</body>
</html>

Answer 1

将JavaScript移动到结束体元素之前的页面末尾。现在，您正在尝试访问尚不存在的元素。 jsFiddle可以工作，因为默认情况下它们将JavaScript代码包装在window.onload事件中。

h1 {
  color: blue;
  font-size: 25px;
  margin: 10px;
}

h2 {
  color: blue;
  font-size: 15px;
  margin: 10px;
}

p {
  margin: 10px;
}

a {
  margin: 10px;
  font-size: 15px;
  text-decoration: none;
  border: 1px solid grey;
  background-color: cyan;
  color: black;
  padding: 3px;
}

<h1>Tiger</h1>
<h2>(From Wikipedia, the free encyclopedia)</h2>
<p>The tiger (Panthera tigris) is the largest cat species, most recognizable for
their pattern of dark vertical stripes on reddish-orange fur with a lighter underside.
The species is classified in the genus Panthera with the lion, leopard, jaguar, and snow leopard.
</p>
<a href="#" id="size-10px">Font size 10</a>
<a href="#" id="size-20px">Font size 20</a>
<a href="#" id="size-30px">Font size 30</a>


<script>
function sizeChanger(size) {
  return function() {
    document.body.style.fontSize = size + 'px';
  };
}
var size10 = sizeChanger(10);
var size20 = sizeChanger(20);
var size30 = sizeChanger(30);

document.getElementById('size-10px').onclick = size10;
document.getElementById('size-20px').onclick = size20;
document.getElementById('size-30px').onclick = size30;
</script>

所以你的代码没有什么问题（虽然你应该避免像document.body.style.fontSize这样的遗留DOM表示法） - 你只是过早地执行它。

我的脚本在jsFiddle中工作但不在我的浏览器中？

1 个答案: