在JavaScript中使用childNodes改变段落样式

Changing paragraph style using childNodes in JavaScript

本文关键字：改变 段落 样式 childNodes JavaScript      更新时间：2023-09-26

我是JavaScript新手。我有一个html文档，我想改变段落的字体是在一个div，但我有一个问题。我在控制台得到了这个错误:

Uncaught TypeError: Cannot set property 'fontSize' of undefined

这是我的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....等来改变每个段落的样式等等

[编辑]

我以这段代码结束:

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';
}

，我发现由于html文档的空格，它没有遵循一个连续的顺序，这看起来很奇怪，因为我认为它应该是连续的

试试这个:

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';
}
}

在您的示例中，您应该将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

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

请考虑下一个拿起你代码的人。他们需要改变字体大小。它们会在样式表中查找该值，但它不在那里。几个小时后，他们在JavaScript中找到了它，这是你意想不到的。然后他们下班，喝得酩酊大醉，把你的代码告诉他们的朋友，因为你让他们的一天变得多么艰难。

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

所以，你给你的body类一个标签，并有一些样式改变字体大小基于它?

/* 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值，如果可以的话。相反，在页面上操作元素的类，让样式表做它应该做的事情:为内容设置样式。
相关文章：