このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。
CSS オブジェクトモデル (CSSOM)
CSS オブジェクトモデルは CSS を JavaScript から操作するための API の集合です。これは DOM にとても良く似ていますが、 HTML ではなく CSS のためのものです。これにより CSS スタイルを動的に読んだり変更したりすることができます。
CSS の値は型を使わずに表現しますので、 String オブジェクトを使用します。
リファレンス
AnimationEventCaretPositionCSSCSSConditionRuleCSSCounterStyleRuleCSSFontFaceRuleCSSFontFeatureValuesMapCSSFontFeatureValuesRuleCSSGroupingRuleCSSImportRuleCSSKeyframeRuleCSSKeyframesRuleCSSMarginRuleCSSMediaRuleCSSNamespaceRuleCSSPageRuleCSSPositionTryRuleCSSPositionTryDescriptorsCSSRuleCSSRuleListCSSStartingStyleRuleCSSStyleDeclarationCSSStyleSheetCSSStyleRuleCSSSupportsRuleCSSNestedDeclarationsFontFaceFontFaceSetFontFaceSetLoadEventMediaListMediaQueryListMediaQueryListEventScreenStyleSheetStyleSheetListTransitionEventVisualViewport
他にも CSSOM に関する仕様書で拡張されているインターフェイスがあります。 Document, Window, Element, HTMLElement, HTMLImageElement, Range, MouseEvent, SVGElement です。
CSS 型付きオブジェクトモデル
CSSImageValueCSSKeywordValueCSSMathInvertCSSMathMaxCSSMathMinCSSMathNegateCSSMathProductCSSMathSumCSSMathValueCSSMatrixComponentCSSNumericArrayCSSNumericValueCSSPerspectiveCSSPositionValueCSSRotateCSSScaleCSSSkewCSSSkewXCSSSkewYCSSStyleValueCSSTransformComponentCSSTransformValueCSSTranslateCSSUnitValueCSSUnparsedValueCSSVariableReferenceValueStylePropertyMapStylePropertyMapReadOnly
廃止された CSSOM インターフェイス 非推奨;
非推奨;: この機能は非推奨になりました。まだ対応しているブラウザーがあるかもしれませんが、すでに関連するウェブ標準から削除されているか、削除の手続き中であるか、互換性のためだけに残されている可能性があります。使用を避け、できれば既存のコードは更新してください。このページの下部にある互換性一覧表を見て判断してください。この機能は突然動作しなくなる可能性があることに注意してください。
CSSPrimitiveValue非推奨;CSSValue非推奨;CSSValueList非推奨;
チュートリアル
仕様書
| Specification |
|---|
| CSS Object Model (CSSOM) |
| CSSOM View Module |
| CSS Typed OM Level 1 |
ブラウザーの互換性
この機能のすべてはさまざまなブラウザーで何年かけて少しずつ追加されてきました。これは簡単なページにまとめることができないとても複雑なプロセスでした。利用できるかについてはそれぞれのインターフェイスを参照してください。