1

您好，我是 javascript 新手，我有一个 html 文档，我想更改 div 内的段落的字体大小，但我遇到了问题，我在控制台中收到此错误Uncaught TypeError: Cannot set property 'fontSize' of undefined codigo.js:5

这是我的html：

<!DOCTYPE html>
<html leng="es">
<head>
<meta charset="UTF-8">
<title>Mi ejercicio DHTML</title>
<link rel="stylesheet" type="text/css" href="css/estilos.css">
<script type="text/javascript" src="js/codigo.js" ></script>
</head>
<body>
<div id="parrafos">
<p>
    Your bones don't break, mine do. That's clear. Your cells react to bacteria 
</p>
<p>
    Your bones don't break, mine do. That's clear. Your cells react to bacteria 
</p>
<p>
    Your bones don't break, mine do. That's clear. Your cells react to bacteria 
</p>
<p>
    Your bones don't break, mine do. That's clear. Your cells react to bacteria 
</p>
<p>
    Your bones don't break, mine do. That's clear. Your cells react to bacteria 
</p>
</div>
</body>
</html>

这是我的 js：

window.addEventListener('load', inicio); 

function inicio(){
var parrafos = document.getElementById('parrafos');
parrafos.childNodes[0].style.fontSize='10px';
}

我想要的是通过在名为 parrafos 的 div 上使用 childNodes 通过访问其索引 parrafos.childNodes[2].style....etc 等来更改每个段落的样式

[编辑]

我以这段代码结束

window.addEventListener('load', inicio); 

function inicio(){
var parrafos = document.getElementById('parrafos');
parrafos.childNodes[1].style.fontSize='1.5em';
parrafos.childNodes[3].style.fontSize='1.3em';
parrafos.childNodes[5].style.fontSize='.5em';
parrafos.childNodes[7].style.fontSize='1em';
parrafos.childNodes[9].style.fontSize='.2em';

}

我发现由于空间 en html 文档它没有遵循连续的顺序，这似乎很奇怪，因为我认为它应该是连续的。

4

3 回答 3

1

在您的示例中，您应该将 fontSize 设置为“10pt”而不是“10px”（或“1em”），请参阅：http: //jsfiddle.net/K9Uhn

var parrafos = document.getElementById('parrafos');
parrafos.childNodes[1].style.fontSize='10pt';

此外，您还应该考虑为此使用 jQuery。当它自己处理元素迭代和 dom 问题时，它会为您省去很多麻烦。例如，用于更改上述示例的所有字体大小的 jQuery 代码将是

$("#parrafos").css("font-size", "10pt");

不需要自己做 for 循环，jQuery 处理所有这些。而且，它与所有浏览器兼容（您会发现这是一个巨大的优势）：www.jquery.com

于 2013-03-26T18:13:08.453 回答
1

尝试这个： 

window.addEventListener('load', inicio); 

function inicio(){
var parrafos = document.getElementById('parrafos');

for (var i=0; i<parrafos.children.length; i++) {
    parrafos.children[i].style.fontSize = '10px';
}
}
于 2013-03-26T18:07:25.647 回答
0

在每个元素的基础上调整这样的样式并不是一个好主意。样式表和元素类是你的朋友！

请考虑下一个拿起您的代码的人。他们需要更改字体大小。他们查看样式表，您希望在其中找到该值，但它不存在。几个小时后，他们在 JavaScript 中找到了它，这是您意想不到的。然后他们下班，酗酒，把你的代码搞砸给他们的朋友，因为你刚刚让他们度过了多么辛苦的一天。

可维护性是最小化这种情况发生频率的东西。

所以相反，你给你的身体类一个标签，并有一些基于它改变字体大小的样式怎么样？

/* Stylesheet */
p {
  font-size: 16px
}

body.small p {
  font-size: 10px
}

现在你的 JS 函数就变成了这样：

// Javascript
function inicio(){
    document.body.className = 'small';
}

这更容易管理。

在这里看到它的工作：http: //jsfiddle.net/s6BAf/

一般来说，不要在 HTML 中使用内联样式，或者如果可以避免的话，直接在 javascript 中设置 CSS 值。取而代之的是，操纵页面上的元素类，让样式表做它该做的事情：为内容设置样式。

于 2013-03-26T18:12:52.427 回答