document.createStyleSheet( style )は、Styleオブジェクトを作るメソッド。ドキュメントにスタイル情報を追加したいときに使う。
構文
document.createStyleSheet( style );
引数
- style
- スタイル情報を指定すると、Styleオブジェクトに、スタイル情報を追加する。
- URLを指定すると、Linkオブジェクトとして、スタイルシートファイルへのリンク情報を追加する。
戻り値
Styleオブジェクト。
サンプル
サンプルの動作について
- 「青色」ボタンをクリックすると、緑色のボックスが青色に変わる。
- 「黄色」ボタンをクリックすると、緑色のボックスが黄色に変わる。
- 「赤色」ボタンをクリックすると、緑色のボックスが赤色に変わる。
サンプルのソースコード
JavaScript
<script type="text/javascript">
function sampleCreateStyleSheet( $color ) {
document.createStyleSheet( document.getElementById( "sample" ).style.backgroundColor = $color );
}
</script>
function sampleCreateStyleSheet( $color ) {
document.createStyleSheet( document.getElementById( "sample" ).style.backgroundColor = $color );
}
</script>
HTML
<div id="sample">
<button onclick="sampleCreateStyleSheet( 'blue' );">青色</button>
<button onclick="sampleCreateStyleSheet( 'yellow' );">黄色</button>
<button onclick="sampleCreateStyleSheet( 'red' );">赤色</button>
</div>
<button onclick="sampleCreateStyleSheet( 'blue' );">青色</button>
<button onclick="sampleCreateStyleSheet( 'yellow' );">黄色</button>
<button onclick="sampleCreateStyleSheet( 'red' );">赤色</button>
</div>
CSS
<style type="text/css">
#sample {
height: 10em;
background-color: green;
padding: 1em;
}
</style>
#sample {
height: 10em;
background-color: green;
padding: 1em;
}
</style>