スタイルシートの非表示

Js


document.styleSheets[0].disabledでスタイルシートの有効・無効を設定できる。


以下サンプル(IE,FireFoxでは動いたよ)


css1.html

<html>
<link rel="stylesheet" href="test.css">
<script>

function click1(){

if (document.styleSheets[0].disabled == false){
 document.styleSheets[0].disabled = true;
}else{
 document.styleSheets[0].disabled = false;
}

}

function click2(){
 alert(document.styleSheets[0].href);
}
</script>
<body>

	<input type='button' value='test' onclick='click1()'>

	スタイルシートのＯＮ・ＯＦＦ(ＩＥ)
	<table>
		<tr rowNum="1" class="line0">
			<td>aa</td><td>aa</td>
			<td>
			<table>
				<tr>
					<td>aa</td><td>aa-1</td>
				</tr>
				<tr>
					<td>bb</td><td>aa-2</td>
				</tr>
				<tr>
					<td>cc</td><td>aa-3</td>
				</tr>
			</table>
			<td>

		</tr>
	</table>

<body>
</html>


test.css

/*** color style start ***/
.line0 {
	height : 23px;
	vertical-align: middle;
	background-color: #ECFDFF;
	border-right: #77B4EA 1px solid;
	border-top: #77B4EA 1px solid;
	border-left: #77B4EA 1px solid;
	border-bottom: #77B4EA 1px solid;
	font-family:"ＭＳ ゴシック";
}