1

アクセシビリティ ツールを実装しようとしています。ボタンをクリックすると、段落のフォント サイズを変更できましたが、すべての段落で機能するようにコードを変更しようとしましたが、機能しませんでした。

<script>

function myFunction()

{
 var p =document.getElementsByTagName('p'); // Find the element
p.style.fontSize="1.5em";          // Change the style
}
</script>

<button type="button" style="background: #ccc url(images/small.jpg);  padding: 0.3em 1em"   onclick="myFunction()"></button>

これは、以前は1つの段落だけで機能していましたが、複数の段落を試しています:

<script>
function myFunction()
{
x=document.getElementById("demo") // Find the element
x.style.fontSize="3.0em";          // Change the style
}
</script>
4

2 に答える 2

3

getElementsByTagName配列のようなNodeListを返すため、それらをループして各要素にスタイルを適用する必要があります。

function myFunction() {
    var arr = document.getElementsByTagName('p');
    for (var i = 0; i < arr.length; i++) {
        arr[i].style.fontSize = "1.5em";
    }
}
于 2013-02-10T15:32:25.047 に答える
2

最初のコードブロックの問題は、getElementsByTagNameが要素のnodeListを返すことです（これは配列のふりをすることができます）。したがって、これを行う必要があります。

var p =document.getElementsByTagName('p'); // Find the element
for(var i=0; i<p.length; i++) {
  p[i].style.fontSize="1.5em";          // Change the style
  }

ただし、より良いアプローチは、この仕事をするためにいくつかのcssクラスを定義することです。

<style>
body { /*normal size*/
  font-size: 1em;
}

body.largeFont {
  font-size: 1.5em;
}
</style>

<script>
function largeFont() {
  document.body.className="largeFont";
}
</script>
于 2013-02-10T15:34:22.967 に答える