Skip to content

Instantly share code, notes, and snippets.

@suneo3476

suneo3476/style_change.html

Last active December 18, 2015 14:29
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save suneo3476/5797864 to your computer and use it in GitHub Desktop.
Save suneo3476/5797864 to your computer and use it in GitHub Desktop.
Download ZIP
【解決】「パーフェクトJavaScript」p.286 リスト11.5 のコード。 チェックボックスによって適用するcssを変更する。 Firefox4.* でチェックボックスのイベントが起こる度に、 TypeError: document.getElementById(...) is null [Break On This Error] document.getElementById(id).disabled = !enable; とのこと。どなたかわかる方いらっしゃいませんか。
Raw
style_change.html
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>スタイルシートそのものを変更する</title>
<style>
<link rel="stylesheet" type="text/css" href="style-a.css" id="style-a" disabled="true">
<link rel="stylesheet" type="text/css" href="style-b.css" id="style-b" disabled="true">
#foo {
background-color: #999;
}
</style>
<script>
function change(id, enable){
//チェックボックスでチェックをいれたスタイルを有効にする
document.getElementById(id).disabled = !enable;
}
window.addEventListener('load', function () {
//初期化処理としてすべてのスタイルを無効にする
var styles = document.styleSheets;
for (var i = 0; i < styles.length; i++) {
styles[i].disabled = true;
}
}, false);
</script>
</head>
<body>
<div id="foo">This is sample.</div>
<input type="checkbox" onchange="change('style-a', this.checked)">
<input type="checkbox" onchange="change('style-b', this.checked)">
<input type="checkbox" onchange="change('style-c', this.checked)">
</body>
</html>
<!--
/* style-a.cssの中身 */
#foo {
font-size: x-large;
}
/* style-b.cssの中身 */
#foo {
text-decoration: underline;
}
-->
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment