用途
新着
履歴
分類

JS CSSを追加する

JS CSSを追加する
JS CSSを追加する
jQueryなどを使わずに、JSのみでCSSを変更する時のサンプルです。

JSでドキュメントのスタイル情報を取得して、JSで新しいCSSを追記します。

下記の四角はサイズだけCSSで記述して描画しています。

width: 200px;
height: 100px;

後からJSで背景の赤を追加しています。

CSSの記述は以下だけ

<style>
    #demo_item {
        width: 200px;
    }
</style>

<style>
    #demo_item {
        height: 100px;
    }
</style>

これだけだと色はつきません。

その後に以下のようなJSを記述するとCSSを追加変更できます。

    //ドキュメントのスタイル情報の取得
    var sheets = document.styleSheets

    //sheets.lengthは<style>の記述の数
    console.log(sheets.length); // 2

    //なので最後のstyleは sheets[1]
    var sheet = sheets[sheets.length - 1];

    //最後のstyleの中にcssを追加する
    sheet.insertRule(
    '#demo_item { background-color : #F00; }',
    sheet.cssRules.length
    );
    //sheet.cssRules.lengthはCSSのルールの数なのでその後に追加
公開 2022-03-30 07:41:20
更新 2022-03-30 07:43:55
このページの二次元コード

同じカテゴリーのサンプル

人気のサンプル

search -  category -  about
© 2022 kipure
Top