我是JavaScript新手。我有一个html文档,我想改变段落的字体是在一个div,但我有一个问题。我在控制台得到了这个错误:
这是我的html:Uncaught TypeError: Cannot set property 'fontSize' of undefined
<!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值,如果可以的话。相反,在页面上操作元素的类,让样式表做它应该做的事情:为内容设置样式。