编辑:这是以下问题的 JSFiddle。
所以我试图用 JavaScript 激活一个模板，但它有一段时间没有工作，最后我通过在看似无关的代码块中将 For-In 循环更改为 For 循环来修复它。
下面的代码是我改成for循环的For-In循环。注释掉的代码是不起作用的原始代码，未注释的 for 循环是现在可以工作的代码。此代码用于更改类元素的所有实例中文本的字体大小:
var release4 = document.getElementsByClassName("release-4");
// for (item in release4){
// release4[item].style.fontSize = "2em";
// };
for (var i = 0 ; i < release4.length ; i++) {
release4[i].style.fontSize = "2em";
}
这是我用来激活模板的代码。它不是 release-4 类的一部分:
var tmpl = document.getElementById('hidden');
document.body.appendChild(tmpl.content.cloneNode(true));
这是随附的 HTML:
<html>
<head>
<title>Manipulate the DOM</title>
</head>
<body>
<div id="release-0">
<p class="release-4"> Here is some text, add a class "done" to the parent div</p>
</div>
<div id="release-1">
<p>remove the #release-1 div</p>
</div>
<h1>Change this text to finish release 2</h1>
<div id="release-3">
<p class="release-4"> add CSS to this div</p>
</div>
<template id="hidden">
<div>
<h1> Congrats! You finished the challenge.</h1>
<img src="http://media.giphy.com/media/2UpzC3iPenf44/giphy.gif">
</div>
</template>
<script type="text/javascript" src="home_page.js"></script>
</body>
</html>
我的问题是为什么更改 For 循环会有所不同？谢谢大家!
JS 文件中的所有其他代码仅影响 ID release-0、release-1 和 release-3 以及 h1 标签。类名称、显示、innerHTML 和背景颜色是对它们所做的唯一更改。
最佳答案
如果我在 for in 循环中 console.log() item 会产生:
0
1
length
item
namedItem
我认为 length、ìtem 和 namedItem 会导致错误。
更新:
使用 Array.from 它按预期工作。
var release4 = Array.from(document.getElementsByClassName("release-4"));
for (item in release4){
release4[item].style.fontSize = "2em";
};
关于javascript - HTML 模板不适用于 For-In 循环 JavaScript，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26937800/