JavaScript:display操作用関数

goto_jp 133views 更新:2014年11月12日

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

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をなんでも操作できる関数に変えられますね。

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません