みかづきブログ その3

3ヶ月つづけてみました。

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

<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タグを削除しても効果は消えないのです。
そのあたりは念能力に似ているのかもしれないですね。