kamolog » HTML, Javascript http://www.mkamo.org/blog mkamo's blog ．．．．． mkamo's memo? Tue, 13 Jul 2010 12:07:41 +0000 http://wordpress.org/?v=2.8.4 ja hourly 1 id値に「.」が含まれている要素をCSSで選択する方法 http://www.mkamo.org/blog/20090705/416.html http://www.mkamo.org/blog/20090705/416.html#comments Sun, 05 Jul 2009 05:58:52 +0000 mkamo http://www.mkamo.org/blog/20090705/416.html HTML要素のid値に「.」が含まれているときに，CSSでその要素を選択する方法のメモ．

CSSで次の方法を使う．

  1. IDセレクタのid値の指定で「.」を「\」でエスケープさせる
  2. 属性セレクタでidを指定する

以下，説明．

HTML4.01では要素のid属性の値を「アルファベット([A-Za-z])で開始し、任意の数のアルファベット、数字([0-9])、ハイフン(-)、アンダースコア(_)、コロン(:)、ピリオド(.)のみ」で記述できる．なので， 

<div id="foo.bar">
hoge
</div>

はHTML4.01のコードとして妥当で，「id属性の値が「foo.bar」であるdiv要素」となる．

しかし，CSS2.1ではHTMLで使用されるスタイルシートについては「.」はクラスセレクタと定義されている．CSSで上記のdiv要素を選択するつもりで 

div#foo.bar {
	color: red;
}

と指定すると，「id属性の値が「foo」で，class属性の値がスペースで区切ると「bar」と一致するものがあるdiv要素」，すなわち次のような要素の選択になってしまう． 

<div id="foo" class="bar baz">
hoge
</div>

CSSで特別な意味を持つ文字を含むid値を持つ要素を選択する方法は以下のとおり．

  1. IDセレクタのid値の指定で「.」を「\」でエスケープさせる
    CSSでは特別な意味を持つ文字を「\」でエスケープできる．「\」を使って「.」をエスケープした例は以下のとおり． 
    div#foo\.bar {
	color: red;
}
  2. 属性セレクタでidを指定する
    属性セレクタでid値を指定して要素を選択する． 
    div[id="foo.bar"] {
	color: red;
}

    属性セレクタがIDセレクタより優先順位が低いことが問題になる場合は，「!import」を使う． 

    div[id="foo.bar"] {
	color: red !important;
}
]]> http://www.mkamo.org/blog/20090705/416.html/feed 0 複数のチェックボックスを選択するためのチェックボックス http://www.mkamo.org/blog/20090201/98.html http://www.mkamo.org/blog/20090201/98.html#comments Sun, 01 Feb 2009 07:33:25 +0000 mkamo http://www.mkamo.org/blog/20090201/98.html 複数のチェックボックスのcheckedを一気に更新するHTML & Javascriptのサンプル．

チェックボックスのidやnameがばらばらでも大丈夫な例．

<script type="text/javascript">
<!--
    function checkAll(checkbox, targetIds) {
        var checked = checkbox.checked;
        for (i = 0; i < targetIds.length; i++) {
			var target = document.getElementById(targetIds[i]);
	        target.checked = checked;
        }
    }
//-->
</script>

<input type="checkbox" id="allCheck" onclick='checkAll(this, new Array("foo", "bar", "baz"));' />
<label for="allCheck">すべて選択</label>
<br />

<input type="checkbox" id="foo" name="foo" value="foo" /><label for="foo">foo</label><br />
<input type="checkbox" id="bar" name="bar" value="bar" /><label for="bar">bar</label><br />
<input type="checkbox" id="baz" name="baz" value="baz" /><label for="baz">baz</label><br />

チェックボックスがたくさんあって上記のやり方では面倒な場合は，複数のチェックボックスをdivでくるんでおいてその子供を一気にcheckedを更新するのもありかも．以下はその例．

<script type="text/javascript">
<!--
    function checkAll(checkbox, targetId) {
        var checked = checkbox.checked;
        var children = document.getElementById(targetId).childNodes;
        for (i = 0; i < children.length; i++) {
			if (children[i].type == "checkbox") {
	            children[i].checked = checked;
			}
        }
    }
//-->
</script>

<input type="checkbox" id="allCheck" onclick='checkAll(this, "checkboxes");' />
<label for="allCheck">すべて選択</label>
<br />

<div id="checkboxes">
	<input type="checkbox" id="foo" name="foo" value="foo" /><label for="foo">foo</label><br />
	<input type="checkbox" id="bar" name="bar" value="bar" /><label for="bar">bar</label><br />
	<input type="checkbox" id="baz" name="baz" value="baz" /><label for="baz">baz</label><br />
</div>
]]> http://www.mkamo.org/blog/20090201/98.html/feed 0 Google Maps APIの使い方 http://www.mkamo.org/blog/20080428/36.html http://www.mkamo.org/blog/20080428/36.html#comments Mon, 28 Apr 2008 09:12:36 +0000 mkamo http://www.mkamo.org/blog/20080428/36.html 以下のサイトにサンプルがある．なかなか豊富でありがたい．

]]> http://www.mkamo.org/blog/20080428/36.html/feed 0