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

}

そして、HTMLドキュメントのスペースのために、連続した順序に従っていないことがわかりました。これは、連続する必要があると思った奇妙な原因のようです。

4

3 に答える 3

1

この例では、fontSize を「10px」(または「1em」) ではなく「10pt」に設定する必要があります。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 でそれを見つけます。その後、彼らは仕事を辞め、大酒を飲み、あなたのコードについて友達に悪口を言います。

保守性は、このシナリオが発生する頻度を最小限に抑えるものです。

代わりに、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 値を直接設定したりしないでください。代わりに、ページ上の要素のクラスを操作し、スタイルシートで行うこと、つまりコンテンツのスタイルを設定します。

于 2013-03-26T18:12:52.427 に答える