適当な思いつきで書くブログ

UbuntuやPerlやJavaScriptやVimやZshやShellScriptやMySQLと戯れている中で適当な思いつきでやってみたことを書いています。

外部CSSをremoveしたときにそのCSSのstyleが解除されるタイミングがIE6とFireFox & Operaで違う

javascript

外部CSSのlinkタグをappendChild()すると、appendの完了(というか読み込みの完了？)と同時にそのstyleが反映される。
しかし、removeに関してはそのstyleが解除されるタイミングがブラウザによって異なるのでメモ。

結果 : remove後、反映されるタイミングは…

  • IE6, IE7は「次に外部CSSがappendされるとき」
  • FireFox & Operaは「removeの完了と同時」
  • Safariはappendできてなかったー＞＜

(Windowsしか調べてません＞＜ ってか調べた)


デモはこちら

自分のまとめ

やっぱり後者の挙動が正しいと思うのですよねー。

何が正しいんだか分からなくなったけど、FireFox & Operaの挙動がうれしいなー


(で、ソースは下記参照。)

HTML(hoge.html)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>hoge</title>
</head>
<body>

<p id="foo">foo</p>
<p id="bar">bar</p>

<button id="load-foo" name="foo">load foo.css</button>
<button id="load-bar" name="bar">load bar.css</button>
<button id="remove-foo" name="foo" disabled="disabled">remove foo.css</button>
<button id="remove-bar" name="bar" disabled="disabled">remove bar.css</button>
<script type="text/javascript" src="fuga.js"></script>

</body>
</html>
      • -

JavaScript(fuga.js)

(function() {
  var load_css = function(value) {
    var css = document.createElement('link');
    css.href = value + '.css';
    css.type = 'text/css';
    css.rel = 'stylesheet';
    css.id = 'link-' + value;
    document.getElementsByTagName('body')[0].appendChild(css)
  };
  
  document.getElementById('load-foo').onclick = document.getElementById('load-bar').onclick = function() {
    load_css(this.name);
    
    this.disabled = 'disabled';
    document.getElementById('remove-' + this.name).disabled = '';
  };

  document.getElementById('remove-foo').onclick = document.getElementById('remove-bar').onclick = function() {
    document.getElementById('link-' + this.name).parentNode.removeChild(document.getElementById('link-' + this.name));
    
    this.disabled = 'disabled';
    document.getElementById('load-' + this.name).disabled = '';
  };
})();
      • -

外部CSS(foo.css)

p#foo {
	color: #00F;
	font-weight: bold;
}

外部CSS(bar.css)

p#bar {
	color: #F00;
	font-weight: bold;
}