【Javascript】jQuery等のライブラリなしでクラスの追加と削除 #JavaScript


<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>【Javascript】jQuery等のライブラリなしでクラスの追加と削除</title>
<style type="text/css">

.nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
.menu0 li {
    display: inline;
    padding: 0;
    margin: 0;
    float: left;
}
.menu0 li a {
    display: block;
    border: 1px solid gray;
    padding: 3px;
    text-decoration: none;
    width: 100px;
    margin: 1px;
    text-align: center;
    font-size: 14px;
}
.menu0 li a:hover {
    background-color: tomato;
}
.menu1 a {
    color: lime;
}
.menu2 a {
    color: blue;
}
.menu3 a {
    color: aqua;
}
.menu4 a {
    color: gold;
}
.menu5 {
    text-decoration: underline;
}

</style>
</head>
<body>

<h3>【Javascript】jQuery等のライブラリなしでクラスの追加と削除</h3>

<div class="nav">
    <ul class="menu0" id="menu">
        <li class="menu1"><a href="#">lime</a></li>
        <li class="menu2"><a href="#">blue</a></li>
        <li class="menu3"><a href="#">aqua</a></li>
        <li class="menu4"><a href="#">gold</a></li>
    </ul>
</div>

<script type="text/javascript">

var sample = (function() {

    var that = {},
        my = {};

    my.getElements = function(e, p) {
        return document.getElementById(p).getElementsByTagName(e);
    };

    my.add = function(h) {
        if (h.className.indexOf("menu5") === -1) {
            h.className += ' ' + "menu5";
        } else {
            h.className = h.className.replace(' menu5', '');
        }
    };

    that.init = function() {
        var s = my.getElements('li', "menu");
        for (var i = 0; i < s.length; i += 1) {
            s[i].onmouseover = my.add.bind(null, s[i]);
            s[i].onmouseout = my.add.bind(null, s[i]);
        }
    };

    return that;

})();

window.onload = function() {
    sample.init();
};

</script>
</body>
</html>

解説

Javascriptにおいて、jQuery等のライブラリなしでクラスの追加と削除をやるには、classNameを使って要素のクラス属性の設定をする。

クラス名の追加:クラス属性にクラス名を追記する
クラス名の削除:クラス属性からreplaceメソッドでクラス名を空文字に置き換える

上記のコードはliタグをマウスオーバーするとliに設定されたクラス名の後ろにmenu5の追記を行い、マウスアウトするとliに設定したクラス名menu5を削除する。menu5が設定されると文字列に下線を付ける。

【Javascript】jQuery等のライブラリなしでクラスの追加と削除

解説

画面イメージ