CSS object model

概要

CSSOM は CSS をプログラムから読み取り・操作するための API です。スタイルシートのルールの追加・削除・変更が可能です。

対応ブラウザ

基本構文

// インラインスタイル操作
el.style.setProperty('color', 'blue');

// スタイルシートルール操作
const sheet = document.styleSheets[0];
sheet.insertRule('.highlight { background: yellow; }', 0);

実務での使いどころ

• CSS object model の活用

  CSS Object Model。CSSスタイルをJavaScriptで操作するAPI。

注意点

アクセシビリティ

• スクリーンリーダーでの読み上げを確認すること。

参考リンク

• MDN Web Docs — CSS object model