2017.10.24

jQueryのattr()やprop()を生JavaScriptで実装する脱jQuery

attr() は属性値の取得・設定、prop() は主にチェックボックスやセレクトボックスの状態を取得・設定する際に使います。この2つの関数をjQueryなしで実装してみます。

`attr()`


var attr = function(node, name, value) {
  if (typeof value === 'undefined') {
    return node.getAttribute(name);
  }
  node.setAttribute(name, value);
};

使い方


<div class="box" data-size="big"></div>


// 取得
var value = attr(document.querySelector('.box'), 'data-size');
// => big

// 設定
attr(document.querySelector('.box'), 'data-size', 'small');
// => <div class="box" data-size="small"></div>

`prop()`


var prop = function(node, name, value) {
  if (typeof value === 'undefined') {
    return node[name];
  }
  node[name] = value;
};

使い方


<input class="input" type="radio" checked>

<select class="language">
  <option value="en">英語</option>
  <option value="ja" selected>日本語</option>
  <option value="de">ドイツ語</option>
  <option value="fr">フランス語</option>
</select>


// 取得
var value = prop(document.querySelector('.input'), 'checked');
// => true
var value = prop(document.querySelector('.language > option[value="en"]'), 'selected');
// => false

// 設定
prop(document.querySelector('.input'), 'checked', false);
// => チェック解除
prop(document.querySelector('.language > option[value="fr"]'), 'selected', true);
// => フランス語が選択される

CSS本執筆しました！！！

CSS本出します！1/29発売予定
自分がCSS学びたての頃にもっとはやく知りたかったテクニックを載せています。CSSの基礎知識について解説していないので、中級者〜向けとなります。CSS入門書を読んではみたものの、思い通りに作れない人にオススメです。
よろしくお願いします。https://t.co/fkz1dM03Pj pic.twitter.com/suYyaPqwIs
— たかもそ＠CSS本1/29発売!! (@takamosoo) 2018年12月31日