你好我刚接触javascript,我有一个html文件,我想更改为段落里面的字体大小thar在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文件,它不遵循连续的顺序,看起来很糟糕,因为我认为它应该是连续的。
答案 0 :(得分: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';
}
}
答案 1 :(得分:1)
在每个元素的基础上调整这样的样式并不是一个好主意。 Stylesheets和element clases是你的朋友!
请考虑下一个拿起代码的人。他们需要改变字体大小。他们会在样式表中查找您希望找到该值的样式表,但它并不存在。几个小时后,他们在JavaScript中找到它,你不会期望它。然后他们下班,大量饮酒,并将你的代码拙劣地告诉他们的朋友,因为你有多辛苦地度过了他们的一天。
Maintanability 可以最大限度地减少这种情况发生的频率。
那么,你怎么给你的身体类一个标签,并有一些基于它改变字体大小的样式?
/* 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值,如果可以避免的话。相反,操纵页面上的元素类,让样式表完成它的工作:为内容设置样式。
答案 2 :(得分: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