男子プログラマーになりたいやつ

未経験から一端のエンジニア目指し日々勉強中です。

トップ > プログラミング > JavaScript 要素の属性を操作・クラス名で操作

JavaScript 要素の属性を操作・クラス名で操作

プログラミング プログラミング-JavaScript

<a class="keyword" href="http://d.hatena.ne.jp/keyword/JavaScript">JavaScript</a> DOM編 vol.2 f:id:TomozQ:20201115174827j:plain

JavaScript備忘録 Vol.13

目次
  • 要素の属性を操作
  • classNameを取得
  • classList( )




今回もJavaScriptの記事になっています。

今回もDOMの操作を見ていきます。

要素の属性を操作

まずは最初の段階のindex.htmlとmain.jsの中身です

index.html
<!DOCTYPE html>
<html lang = 'ja'>
  <head>
    <meta charset="utf-8">
    <title>JavaScript DOMPractice</title>
  </head>
  <body>
    <h1 id='target'>男子プログラマーになりたいやつ</h1>
    <p>JavaScript.JavaScript.JavaScript.</p>
    <p>React.React.React.</p>
    <p>JQuery.JQuery.JQuery.</p>
    <button id='btn'>Button</button>
    <script src='js/main.js'></script>
  </body>
</html>


js/main.js
'use strict'

{
  function upDate(){
    document.getElementById('target').textContent = 'Chaaaaaaange!!!!'
  }

  const btn = document.getElementById('btn');
  btn.addEventListener('click', () => {
    upDate();
  })
}

f:id:TomozQ:20201115173257p:plain

前回の続きですね。


ではまず、HTMLにtitle属性を追加してみます。

<body>
  <body>
    <h1 id='target' title='見出し'>男子プログラマーになりたいやつ</h1>
    .
    .
    .
  </body>


title属性は要素に対する補助的な情報を与えるもので、マウスホバーすると表示されます。

このtitle属性をJavaScriptで操作していきます。



jsファイルを見ていきましょう。

'use strict'

{
  function upDate(){
    document.getElementById('target').textContent = 'Chaaaaaaange!!!!'
    document.getElementById('target').title = '見出しが変わりました。'
  }

  const btn = document.getElementById('btn');
  btn.addEventListener('click', () => {
    upDate();
  })
}


1.function upDate()という関数内でidがtargetの要素のテキストを変更する。

2.同じくfunction upDate()という関数内でidがtargetのタイトル属性の値を変更する。

3.const btnとしてidがbtnの要素を代入し、

4.btn.addEventListener('click, ')でbtnがクリックされたらupDate()関数を実行する

という処理ですね。

結果はこんな感じ

f:id:TomozQ:20201115173134g:plain

また、このコードでは

document.getElementById('target')

を複数回記述してしまっているので

function upDate(){
  const target = document.getElementById('target');
  target.textContent = 'Chaaaaaaange!!!!';
  target.title = '見出しが変わりました。';
}

の様に定数化しておくといいかもしれませんね。




では次はスタイルを変更してみましょう。
スタイルは.style.プロパティ = ○○の様に記述します。 具体的には...

'use strict'

{
  function upDate(){
    const target = document.getElementById('target');
    target.textContent = 'Chaaaaaaange!!!!';
    target.title = '見出しが変わりました。';
    target.style.color = 'red';
    target.style.backgroundColor = 'black';
  }

  const btn = document.getElementById('btn');
  btn.addEventListener('click', () => {
    upDate();
  })
}

こんな感じですね。

結果は...

f:id:TomozQ:20201115173115g:plain

こうなります。

なんかスタイルが変わるとUIをJSで変えてるぞー！って感じがしていいですよね。




classNameを取得

上ではJavaScriptに直接CSSを書き込んでスタイルを変更しました。



ただ、スタイルに関してはJavaScriptでこのように書いてしまうと、CSSとの役割分担があいまいになるので見た目の指定は CSS に任せて、 JavaScript では class 属性の操作だけを書く方法が一般的です。



ではどの様に変えていくのか見ていきましょう。

<!DOCTYPE html>
<html lang = 'ja'>
  <head>
    <meta charset="utf-8">
    <title>JavaScript DOMPractice</title>
  </head>
  <body>
    <h1 id='target'>男子プログラマーになりたいやつ</h1>
    <p>JavaScript.JavaScript.JavaScript.</p>
    <p>React.React.React.</p>
    <p>JQuery.JQuery.JQuery.</p>
    <button id='btn'>Button</button>
    <script src='js/main.js'></script>
  </body>
</html>

'use strict'

{
  function upDate(){
    
  }

  const btn = document.getElementById('btn');
  btn.addEventListener('click', () => {
    upDate();
  })
}

HTMLはtitle属性を外し、JavaScriptのfunctionの中身は空にしてあります。


まず、HTMLに直書きでmyColorというクラスのスタイルを書いていきます。

<!DOCTYPE html>
<html lang = 'ja'>
  <head>
    <meta charset="utf-8">
    <title>JavaScript DOMPractice</title>
    <style>
      .myColor{
        color: red;
        background-color: black;
      }
    </style>
  </head>
  <body>
    <h1 id='target'>男子プログラマーになりたいやつ</h1>
    <p>JavaScript.JavaScript.JavaScript.</p>
    <p>React.React.React.</p>
    <p>JQuery.JQuery.JQuery.</p>
    <button id='btn'>Button</button>
    <script src='js/main.js'></script>
  </body>
</html>

次に、ボタンをクリックしたら、このクラスをh1要素に付与する様、JavaScriptを書いていきます。

.className =とすることでクラスを付与することができます。

今回の場合は

{
  function upDate(){
    const target = document.getElementById('target');
    target.className = 'myColor';
  }
}

f:id:TomozQ:20201115173056g:plain targetのクラス名をmyColorにしてねとすることでHTMLにCSSで書かれているプロパティが適用され、色が変更されています。

注意点もあります。

<style>
  .myColor{
    color: red;
    background-color: black;
  }
  .myBorder{
    border-bottom: 4px solid orange;
  }
</style>

  <body>
    <h1 id='target' class='myBorder'>男子プログラマーになりたいやつ</h1>
    .
    .
    .
  </body>
</html>

例えばこんな感じですでにh1要素にクラスがついていた場合

f:id:TomozQ:20201115173247p:plain

上記のJavaScriptのコードでボタンを押すと... f:id:TomozQ:20201115173038g:plain

こんな感じでmyBorderクラスが外れてしまいます。



classNameを使用すると、クラス属性の値が丸々変わってしまうのです。



myBorderも残したままにしたい場合には

target.className = 'myColor myBorder';

この様に、元々あるクラスも書いてあげます。

f:id:TomozQ:20201115173020g:plain

でもこれちょっとめんどくさいですよね・・・




classList( )

もう少し便利な方法を見ていきましょう。


これが上のJavaScriptのコードです。

'use strict'

{
  function upDate(){
    const target = document.getElementById('target');
    target.className = 'myColor myBorder';
  }

  const btn = document.getElementById('btn');
  btn.addEventListener('click', () => {
    upDate();
  })
}


ここではclassList( )を使って書き換えてみましょう。
.classList.add('クラス名')とすることでクラスを追加することができます。

今回の場合は

target.classList.add('myColor');

f:id:TomozQ:20201115173020g:plain

myBorderを書く必要がなくなりましたね。




またclassList( )を使うことでクラスを調べることができます。

classList.contains( )としてあげることで、有無をtrue、falseで返してくれます。

さらに、remove( )を使うことでクラスを削除することもできます。

ではこの2つを使ってコードを書いてみましょう。

function upDate(){
  const target = document.getElementById('target');
  if(target.classList.contains('myColor')){
    target.classList.remove('myColor');
  }else{
    target.classList.add('myColor');
  }
}

targetにmyColorクラスがついていたら外し、ついていなかったら追加するという処理ですね。 f:id:TomozQ:20201115174421g:plain

この様な処理はよくあるので、実はもっと短い記述も用意されています。

function upDate(){
  const target = document.getElementById('target');
  target.classList.toggle('myColor');
}


toggle( )とすることで有無を切り替えてくれます。

動作は上と変わりません。






今回はここまで

次回は・・・まだまだJS！

それではまた次回！