ywork2020.com

Title

読み込んだ外部 CSS を有効、または無効にする

目次 (INDEX)

document.styleSheets.disabled とは

ここで説明する document.styleSheets.disabled とは次の語句からなる JavaScript のプロパティです。
document
読み: ドキュメント
意味: 文書
styleSheets
読み: スタイルシーツ
意味: スタイルシートの複数形 (CSS の配列を意味します。)
disabled
読み: ディセイブル
意味: 無効、動作しない

目次に戻る

document.styleSheets.disabled プロパティの概要

このプロパティは、外部からドキュメントに読み込まれた CSS ファイルのリストを参照し、指定した CSS を有効、または無効にします。

Document オブジェクトは document 変数、または document プロパティから参照します。

Document オブジェクト の styleSheets はドキュメントに読み込まれた CSS のファイルをリスト ( 配列 ) として参照します。

目次に戻る

構文

サンプルを見る前に構文を確認しておきます。

document.styleSheets[n].disabled = true | false
  • n: 読み込まれた CSS ファイルのインデックス番号です。最初に読み込まれた CSS ファイルが 0 となり、順に 1 , 2 , 3 となります。

以下は item() メソッドを使用してインデックス番号を指定した例です。

document.styleSheets.item(n).disabled = true | false

目次に戻る

サンプルコードと実行結果

ここでは、ドキュメントに 2つの CSS ファイルをインポートし、 その 2つ目の CSS を無効にしたり、有効にしたりしてみます。

有効と無効の切り替えは mouseenter と mouseleave イベントを利用しますので、 マウスポインターを画像に乗せたり、離したりしてみてください。

サンプルコード: CSS ( sample1.css ファイル)
<style>
	#idImg{
		position: relative;
		box-shadow: 6px 6px 10px;
		left: -6px;
		top: -6px;
	}
</style>
サンプルコード: HTML
<head>
	<link rel="stylesheet" type="text/css" href="sample0.css">
	<link rel="stylesheet" type="text/css" href="sample1.css">
<head>
<body>
	<img id="idImg" src="sample.jpg" alt="サンプル">
	<script>...</script>
</body>
  • 02, 03: link rel="stylesheet" (ここでは 2つの CSS ファイルをドキュメントにインポートしています。)
  • 06: img id="idImg"(この画像要素が sample1.css の影響を受けます。)
サンプルコード: script
<script>
	let elmImg = document.getElementById("idImg");
	elmImg.addEventListener("mouseenter", function(){
		document.styleSheets[1].disabled = true;
	});
	elmImg.addEventListener("mouseleave", function(){
		document.styleSheets.item(1).disabled = false;
	});
</script>
  • 04: document.styleSheets[1].disabled (ここでは [1] を指定しているの 2番目の CSS ファイルを指しています。)
  • 07: document.styleSheets.item(1).disabled ( 04: 行目の [n] の部分を item(n) メソッドに置き換えた例です。動作は [n] を使った場合と同じです。)
実行結果:
画像サンプル

目次に戻る