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

ハックノートをフォローして
最新情報をチェックしよう

AWS構築サービスの全てをまとめた資料を公開中

ハックノート(TOWN株式会社)では、AWSの導入や構築支援を行っています。AWS導入メニューやサービス詳細、構成例や費用を掲載した資料をダウンロードできます。

AWSの新規導入やAWSへの移行を検討の際は、ぜひご参考ください。


APNコンサルティングパートナー

TOWN株式会社はAmazon公認コンサルティングパートナーです。