みかづきブログ その3

本ブログは更新を終了しました。通算140万ユーザーの方に観覧頂くことができました。長い間、ありがとうございました。

👆

引越し先はこちらです!

外部スクリプトと外部スタイルシート

<div id="btn" class="btn">
    <p class="inner">SAY!</p>
</div>

こちらのHTMLに、

* {
    margin: 0; padding: 0;
}

body {
    padding: 50px;
    color: #2e2e2e;
    background: #e8e8e8;
    font: 25px HelveticaNeue-UltraLight;
    text-align: center;
}
 
.btn {
    margin: 20px 10px; 
}

.inner {
    display: inline-block;
    padding: 20px 60px;
    border-bottom: solid #333 4px;
    border-radius: 12px;
    color: #eee;
    cursor: pointer;
    background: #666;
    list-style: none;
}

.inner:hover {
    margin-top: 4px;
    border: none;
}

こちらのCSSと、

(function(win, doc) {

    'use strict';
    
    doc.getElementById('btn').addEventListener('click', function() {
        alert('SAY');
    }, false);
    
})(this, document);

こちらのJavaScriptを読み込ませます。

f:id:kimizuka:20140715224459p:plain

無事にスタイルが適用され、ボタンにクリックイベントが設定されます。

ではこの状態から、外部スクリプトと外部スタイルシートを読み込んでいるlinkタグ、scriptタグを削除したらどうなるでしょうか。


demo

デモはこちらです。
5秒後にlinkタグ、scriptタグを削除しています。

f:id:kimizuka:20140716102935j:plain

ご覧の通り、スタイルシートは効かなくなります。
が、クリックしてみるとわかりますがボタンのクリックイベントは残っています。

そう。外部スクリプトは評価が終わった後にscriptタグを削除しても効果は消えないのです。
そのあたりは念能力に似ているのかもしれないですね。