実現したいこと
発生している問題・エラーメッセージ
document.getElementsByClassName()でクラス指定したテキストボックスのCSSを変えたいのですが、うまくいきません。
該当のソースコード
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>値を入力すると文字の色・太さと背景色が変わる</title> </head> <body> <p>入力してください</p> <ul> <li><input class="box" type="text" name="name" oninput="inputChange()"></li> <li><input class="box" type="text" name="name" oninput="inputChange()"></li> <li><input class="box" type="text" name="name" oninput="inputChange()"></li> </ul> <script> function inputChange(){ document.getElementsByClassName("box").style.backgroundColor = '#F0E0E0'; document.getElementsByClassName("box").style.color = 'red'; document.getElementsByClassName("box").style.fontWeight = 'bold'; } </script> </body> </html>
試したこと
document.getElementById() で単体のテキストボックスのCSSを変えることはできました。
よろしくお願いします。
0 コメント