Tbpgr Blog

Employee Experience Engineer tbpgr（てぃーびー） のブログ

ブラウザの差異 親タグと子タグの設定

雑記
  • 親タグの設定内容と子タグの設定内容について

親タグの設定が子タグに反映されるかどうかについて
ブラウザごとに挙動が異なる。
以下の例だとIEは適用されるが、FireFoxとChromeは無反応。

  • サンプル
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<script type="text/javascript">
function checkDisabled() {
	document.getElementById("parent").disabled = !(document.getElementById("parent").disabled);
}
function checkVisible() {
	var elm = document.getElementById("parent") ;
	if (elm.style.visibility == "visible") {
		elm.style.visibility = "hidden";
	} else {
		elm.style.visibility = "visible";
	}
}
</script>
</head>
<body>
<form action="" name="form1">
<div id="parent">
	<input type="checkbox" name="chk" id="checkTest1" value="1" />
	<input type="checkbox" name="chk" id="checkTest2" value="2" />
	<input type="checkbox" name="chk" id="checkTest3" value="3" />
	<input type="checkbox" name="chk" id="checkTest4" value="4" />
	<input type="checkbox" name="chk" id="checkTest5" value="5" />
</div>
<input type="button" name="btnTest" value="活性／非活性" onClick="checkDisabled()">
<input type="button" name="btnTest" value="表示／非表示" onClick="checkVisible()">
<hr />
</form>
</body>
</html>