JavaScriptでCSSを変更する際の互換表
document.getElementById("test").style.backgroundColor = "#008800";の様な感じで使う。
| CSS | JavaScript | |
|---|---|---|
| 背景の一括指定 | background | background |
| 背景色 | background-color | backgroundColor |
| 背景画像の固定 | background-position | backgroundPosition |
| 背景画像の固定X軸（IE独自） | background-position-x | backgroundPositionX |
| 背景画像の固定Y軸（IE独自） | background-position-y | backgroundPositionY |
| 背景画像の繰り返し | background-repeat | backgroundRepeat |
| 背景画像 | background-image | backgroundImage |
| 背景画像固定 | background-attachment | backgroundAttachment |
| 背景の適用範囲 | background-clip | backgroundClip |
| 背景の基準位置 | background-origin | backgroundOrigin |
| 背景画像のサイズ | background-size | backgroundSize |
| スタッキングコンテキストから分離 | isolation | isolation |
| ボーダーの一括指定 | border | border |
| ボーダーの色 | border-color | borderColor |
| ボーダーのスタイル | border-style | borderStyle |
| ボーダーの太さ | border-width | borderWidth |
| borderWidths | ||
| ボーダー画像の一括指定 | border-image | borderImage |
| ボーダー画像のはみ出し | border-image-outset | borderImageOutset |
| ボーダー画像ファイル | border-image-source | borderImageSource |
| ボーダー画像の9分割 | border-image-slice | borderImageSlice |
| ボーダー画像の太さ | border-image-width | borderImageWidth |
| ボーダー画像の繰り返し方法 | border-image-repeat | borderImageRepeat |
| 上ボーダー | border-top | borderTop |
| 上ボーダーの色 | border-top-color | borderTopColor |
| 上ボーダーのスタイル | border-top-style | borderTopStyle |
| 上ボーダーの太さ | border-top-width | borderTopWidth |
| 右ボーダー | border-right | borderRight |
| 右ボーダーの色 | border-right-color | borderRightColor |
| 右ボーダーのスタイル | border-right-style | borderRightStyle |
| 右ボーダーの太さ | border-right-width | borderRightWidth |
| 下ボーダー | border-bottom | borderBottom |
| 下ボーダーの色 | border-bottom-color | borderBottomColor |
| 下ボーダーのスタイル | border-bottom-style | borderBottomStyle |
| 下ボーダーの太さ | border-bottom-width | borderBottomWidth |
| 左ボーダー | border-left | borderLeft |
| 左ボーダーの色 | border-left-color | borderLeftColor |
| 左ボーダーのスタイル | border-left-style | borderLeftStyle |
| 左ボーダーの太さ | border-left-width | borderLeftWidth |
| 角丸 | border-radius | borderRadius |
| 左上の角丸 | border-top-left-radius | borderTopLeftRadius |
| 右上の角丸 | border-top-right-radius | borderTopRightRadius |
| 右下の角丸 | border-bottom-right-radius | borderBottomRightRadius |
| 左下の角丸 | border-bottom-left-radius | borderBottomLeftRadius |
| アウトラインの一括指定 | outline | outline |
| アウトラインの線種 | outline-style | outlineStyle |
| アウトラインの太さ | outline-width | outlineWidth |
| アウトラインの色 | outline-color | outlineColor |
| アウトラインの離す距離 | outline-offset | outlineOffset |
| 文字色 | color | color |
| フォント | font | font |
| フォントをイタリック | font-style | fontStyle |
| スモールキャップ | font-variant | fontVariant |
| フォントの太さ | font-weight | fontWeight |
| フォントのサイズ | font-size | fontSize |
| フォントのサイズ調整 | font-size-adjust | fontSizeAdjust |
| フォントの長体・平体 | font-stretch | fontStretch |
| フォントの種類 | font-family | fontFamily |
| 行の高さ | line-height | lineHeight |
| 横方向の位置揃え | text-align | textAlign |
| 縦方向の位置揃え | vertical-align | verticalAlign |
| 両端揃え時の詳細設定 | textJustify | |
| 最後の行の横方向の位置揃え | text-align-last | textAlignLast |
| テキスト装飾の一括指定 | text-decoration | textDecoration |
| textDecorationBlink | ||
| textDecorationLineThrough | ||
| textDecorationNone | ||
| textDecorationOverline | ||
| textDecorationUnderline | ||
| テキスト装飾の種類 | text-decoration-line | textDecorationLine |
| テキスト装飾部の色 | text-decoration-color | textDecorationColor |
| テキストの装飾部の線種 | text-decoration-style | textDecorationStyle |
| 下線の表示位置 | text-underline-position | textUnderlinePosition |
| 一行目のインデント幅 | text-indent | textIndent |
| テキストの大文字・小文字 | text-transform | textTransform |
| スペース・タブ・改行の表示 | white-space | whiteSpace |
| タブ幅 | tab-size | tabSize |
| 文字の間隔 | letter-spacing | letterSpacing |
| 単語の間隔 | word-spacing | wordSpacing |
| アルファベット等との間隔（IE独自） | text-autospace | textAutospace |
| 禁則処理のしかた | line-break | |
| 文の改行の仕方 | word-break | wordBreak |
| 単語の途中で改行するか | overflow-wrap（word-wrap） | overflowWrap?（wordWrap） |
| 欧文の単語の途中で改行の際のハイフン | hyphens | hyphens |
| 改行時の効果の挙動 | box-decoration-break | boxDecorationBreak |
| 改行時の記号のぶら下げ | hanging-punctuation | hangingPunctuation |
| 幅 | width | width |
| 幅の最大値 | max-width | maxWidth |
| 幅の最小値 | min-width | minWidth |
| 高さ | height | height |
| 高さの最大値 | max-height | maxHeight |
| 高さの最小値 | min-height | minHeight |
| マージン | margin | margin |
| マージン | margins | |
| マージン上 | margin-top | marginTop |
| マージン右 | margin-right | marginRight |
| マージン下 | margin-bottom | marginBottom |
| マージン左 | margin-left | marginLeft |
| パディング | padding | padding |
| パディング | paddings | |
| パディング上 | padding-top | paddingTop |
| パディング右 | padding-right | paddingRight |
| パディング下 | padding-bottom | paddingBottom |
| パディング左 | padding-left | paddingLeft |
| 回り込みの指定 | float | cssFloat（styleFloat） |
| 回り込み解除 | clear | clear |
| サイズの基準 | box-sizing | boxSizing |
| はみ出た内容の表示方法 | overflow | overflow |
| はみ出た内容の表示方法 | overflow-x | overflowX |
| はみ出た内容の表示方法 | overflow-y | overflowY |
| ユーザーによるサイズ変更 | resize | resize |
| 配置 | position | position |
| 上からの距離 | top | top |
| 右からの距離 | right | right |
| 下からの距離 | bottom | bottom |
| 左からの距離 | left | left |
| 要素の表示形式 | display | display |
| 重なりの順序 | z-index | zIndex |
| 表示・非表示 | visibility | visibility |
| 擬似要素にコンテンツを追加する | content | content |
| 引用符 | quotes | quotes |
| カウンターをリセット | counter-reset | counterReset |
| カウンターをカウントする | counter-increment | counterIncrement |
| 子要素の収め方（拡縮・切り抜き） | object-fit | objectFit |
| 子要素の収める際の位置調整 | object-position | objectFit |
| 切り抜き（トリミング）表示 | clip | clip |
| 透明度 | opacity | opacity |
| 文字表記の方向（左右） | direction | direction |
| Unicodeの文字表記の方向を上書き | unicode-bidi | unicodeBidi |
| 文字表記の方向（縦横）（IE独自） | writing-mode | writingMode |
| テーブル（表）の表示方法 | table-layout | tableLayout |
| テーブル（表）のキャプションの位置 | caption-side | captionSide |
| セルのボーダーの表示の仕方 | border-collapse | borderCollapse |
| セルのボーダーの間隔 | border-spacing | borderSpacing |
| 空白セルのボーダーの表示・非表示 | empty-cells | emptyCells |
| マーカー | list-style | listStyle |
| マーカー画像 | list-style-image | listStyleImage |
| マーカータイプ | list-style-type | listStyleType |
| マーカー位置 | list-style-position | listStylePosition |
| カーソルの形状 | cursor | cursor |
| ユーザーに文章を選択させない | user-select | userSelect |
| テキストにドロップシャドウ効果 | text-shadow | textShadow |
| ボックスにドロップシャドウ効果 | box-shadow | boxShadow |
| 印刷の改ページ箇所 | page-break-before | pageBreakBefore |
| 印刷の改ページ箇所 | page-break-after | pageBreakAfter |
| 印刷の改ページ箇所 | page-break-inside | pageBreakInside |
| 印刷の改ページ時の前ページの最低行数 | orphans | orphans |
| 印刷の改ページ時の次ページの最低行数 | widows | widows |
| あふれた文字の表現方法 | text-overflow | textOverflow |
| アラビア語などのテキスト配置 | text-kashida-space | textKashidaSpace |
| textKashida | ||
| clipBottom | ||
| isBlock | ||
| hasLayout | ||
| getAttribute | ||
| blockDirection | ||
| accelerator | ||
| テキスト入力時のIMEの状態（IE独自だが使える） | ime-mode | imeMode |
| スクロールバーのベース（IE独自） | scrollbar-base-color | scrollbarBaseColor |
| スクロールバーの表面（IE独自） | scrollbar-face-color | scrollbarFaseColor |
| スクロールバーの下地（IE独自） | scrollbar-track-color | scrollbarTrackColor |
| スクロールバーの矢印（IE独自） | scrollbar-arrow-color | scrollbarArrowColor |
| スクロールバーの影（IE独自） | scrollbar-shadow-color | scrollbarShadowColor |
| スクロールバーのハイライト（IE独自） | scrollbar-highlight-color | scrollbarHighlightColor |
| スクロールバーの右端と下端（IE独自） | scrollbar-shadow-color | scrollbarDarkShadowColor |
| スクロールバーの左端と上端（IE独自） | scrollbar-3dlight-color | scrollbar3dLightColor |
| 視覚効果（IE独自） | filter | filter |
| 拡大・縮小表示（IE独自） | zoom | zoom |
| ルビの行揃え | ruby-align | rubyAlign |
| ルビの表示領域 | ruby-overhang | rubyOverhang |
| ルビの表示位置 | ruby-position | rubyPosition |
| 文字方向（IE独自） | layout-flow | layoutFlow |
| 文字グリッドの幅（IE独自） | layout-grid-char | layoutGridChar |
| 行グリッドの高さ（IE独自） | layout-grid-line | layoutGridLine |
| 行・文字グリッド（IE独自） | layout-grid-mode | layoutGridMode |
| グリッドのタイプ（IE独自） | layout-grid-type | layoutGridType |
| 外部スクリプト（IE独自） | behavior | behavior |
| Flexコンテナ内のアイテム配置一括指定 | flex-flow | flexFlow |
| Flexコンテナ内のアイテム配置方向 | flex-direction | flexDirection |
| Flexコンテナ内のアイテム折り返し方法 | flex-wrap | flexWrap |
| Flexコンテナ内のアイテム表示順序 | order | order |
| Flexコンテナ内のアイテムの間隔 | justify-content | justifyContent |
| Flexアイテムの一括指定 | flex | flex |
| Flexアイテムの伸長係数 | flex-grow | flexGrow |
| Flexアイテムの圧縮率 | flex-shrink | flexShrink |
| Flexアイテムの基本幅 | flex-basis | flexBasis |
| Flexの縦配置 | align-content | alignContent |
| Flexの縦配置 | align-items | alignItems |
| Flexの縦配置 | align-self | alignSelf |
| 段組 | columns | columns |
| 段組のカラム幅 | column-width | columnWidth |
| 段組のカラム数 | column-count | columnCount |
| 段組のカラム間隔 | column-gap | columnGap |
| 段組のカラムの区切り線 | column-rule | columnRule |
| 段組のカラムの区切り線の色 | column-rule-color | columnRuleColor |
| 段組のカラムの区切り線の種類 | column-rule-style | columnRuleStyle |
| 段組のカラムの区切り線の幅 | column-rule-width | columnRuleWidth |
| 段組のカラムをぶち抜く | column-span | columnSpan |
| 段組のカラム高を揃えるか | column-fill | columnFill |
| 変形 | transform | transform |
| 変形の原点 | transform-origin | transformOrigin |
| 3D変形時子要素を3D空間に配置 | transform-style | transformStyle |
| 3D変形時の奥行き | perspective | perspective |
| 3D変形時の視点・消失点 | perspective-origin | perspectiveOrigin |
| 3D変形時の裏面を隠す | backface-visibility | backfaceVisibility |
| 変化の一括指定 | transition | transition |
| 変化するCSSプロパティ | transition-property | transitionProperty |
| 変化する時間 | transition-duration | transitionDuration |
| 変化の動き | transition-timing-function | transitionTimingFunction |
| 変化の遅延 | transition-delay | transitionDelay |
| 変化 | transition-property | transitionProperty |
| アニメーション | animation | animation |
| アニメーション 遅延 | animation-delay | animationDelay |
| アニメーション 方向 | animation-direction | animationDirection |
| アニメーション 時間 | animation-duration | animationDuration |
| アニメーション 前後の状態 | animation-fill-mode | animationFillMode |
| アニメーション 回数 | animation-iteration-count | animationIterationCount |
| アニメーション @keyframes名 | animation-name | animationName |
| アニメーション 動き | animation-timing-function | animationTimingFunction |
| アニメーション 実行中か停止中か | animation-play-state | animationPlayState |