JavaScript：display操作用関数

モックでざっくりとポップアップウィンドウなどを作る際によく使う関数をご紹介。

function displayChange($target, $status) {
    var elm = document.getElementById($target);
    var style = elm.currentStyle || document.defaultView.getComputedStyle(elm, '');
    if(!$status) $status = "display";
    elm.style.display = $status;
}

こちらは対象要素（target）に直接displayの状態（status）を指定して操作するシンプルな関数です。

function displayToggle($target) {
    var elm = document.getElementById($target);
    var style = elm.currentStyle || document.defaultView.getComputedStyle(elm, '');
    if (style.display == 'none') {
        elm.style.display = 'block'
    } else {
        elm.style.display = 'none'
    }
}

こちらは対象要素（target）だけ指定して、その要素のdisplayの状態を見てトグルさせる関数です。

function styleChange($target, $property, $status) {
    var elm = document.getElementById($target);
    var style = elm.currentStyle || document.defaultView.getComputedStyle(elm, '');
    elm.style.$property= $status;
}

前者を少しアレンジすれば、CSSをなんでも操作できる関数に変えられますね。