スタイルシート属性・JavaScriptプロパティ対比表です。
スタイルシートを、JavaScriptで動的に変更するときに参考にされると便利かと思われます。
内容に誤り等ございましたら、掲示板、またはメールでお知らせ頂ければ幸いです。
|
| 色 |
| CSS | JavaScript | 設定値 | 説明 |
| color | color | 色名/RGB値 | テキストの色 |
| マージン |
| CSS | JavaScript | 設定値 | 説明 |
| margin | margin | margin-top、margin-right、margin-bottom、margin-leftを一度に指定
上、右、下、左の順に半角スペースで空けて指定 | 上下左右のマージン指定 |
| margin-top | marginTop | 数値+単位
数値+パーセント | 上マージン |
| margin-right | marginRight | 数値+単位
数値+パーセント | 右マージン |
| margin-bottom | marginBottom | 数値+単位
数値+パーセント | 下マージン |
| margin-left | marginLeft | 数値+単位
数値+パーセント | 左マージン |
| パディング |
| CSS | JavaScript | 設定値 | 説明 |
| padding | padding | padding-top、padding-right、padding-bottom、padding-leftを一度に指定
上、右、下、左の順に半角スペースで空けて指定 | 上下左右のパディング指定 |
| padding-top | paddingTop | 数値+単位
数値+パーセント | 上パディング |
| padding-right | paddingRight | 数値+単位
数値+パーセント | 右パディング |
| padding-bottom | paddingBottom | 数値+単位
数値+パーセント | 下パディング |
| padding-left | paddingLeft | 数値+単位
数値+パーセント | 左パディング |
| ボーダー |
| CSS | JavaScript | 設定値 | 説明 |
| border | border | border-top、border-right、border-bottom、border-leftを一度に指定
上下左右の線の太さ、線の種類、線の色の順に半角スペースで空けて指定
（例：1px solid red） | 上下左右のボーダー |
| border-top | borderTop | border-top-width、border-top-style、border-top-colorを一度に指定
上側の線の太さ、線の種類、線の色の順に半角スペースで空けて指定
（例：1px solid red） | 上側の線の太さ、線の種類、線の色 |
| border-right | borderRight | border-right-width、border-right-style、border-right-colorを一度に指定
右側の線の太さ、線の種類、線の色の順に半角スペースで空けて指定
（例：1px solid red） | 右側の線の太さ、線の種類、線の色 |
| border-bottom | borderBottom | border-bottom-width、border-bottom-style、border-bottom-colorを一度に指定
下側の線の太さ、線の種類、線の色の順に半角スペースで空けて指定
（例：1px solid red） | 下側の線の太さ、線の種類、線の色 |
| border-left | borderLeft | border-left-width、border-left-style、border-left-colorを一度に指定
左側の線の太さ、線の種類、線の色の順に半角スペースで空けて指定
（例：1px solid red） | 左側の線の太さ、線の種類、線の色 |
| border-width | borderWidth | border-top-width、border-right-width、border-bottom-width、border-left-widthを一度に指定
上、右、下、左の順に半角スペースで空けて指定 | 上下左右のボーダーの太さ |
| border-top-width | borderTopWidth | thin（細線）
medium（規定値：中太線）
thick（太線）
数値+単位 | 上側の線の太さ |
| border-right-width | borderRightWidth | thin（細線）
medium（規定値：中太線）
thick（太線）
数値+単位 | 右側の線の太さ |
| border-bottom-width | borderBottomWidth | thin（細線）
medium（規定値：中太線）
thick（太線）
数値+単位 | 下側の線の太さ |
| border-left-width | borderLeftWidth | thin（細線）
medium（規定値：中太線）
thick（太線）
数値+単位 | 左側の線の太さ |
| border-style | borderStyle | border-top-style、border-right-style、border-bottom-style、border-left-styleを一度に指定
上、右、下、左の順に半角スペースで空けて指定 | 上下左右のボーダースタイル |
| border-top-style | borderTopStyle | none（線無し）
dotted（点線）
dashed（粗い点線）
solid（実線）
double（二重線）
groove（谷線）
ridge（山線）
inset（内線）
outset（外線）
inherit（継承） | 上側の線の種類 |
| border-right-style | borderRightStyle | none（線無し）
dotted（点線）
dashed（粗い点線）
solid（実線）
double（二重線）
groove（谷線）
ridge（山線）
inset（内線）
outset（外線）
inherit（継承） | 右側の線の種類 |
| border-bottom-style | borderBottomStyle | none（線無し）
dotted（点線）
dashed（粗い点線）
solid（実線）
double（二重線）
groove（谷線）
ridge（山線）
inset（内線）
outset（外線）
inherit（継承） | 下側の線の種類 |
| border-left-style | borderLeftStyle | none（線無し）
dotted（点線）
dashed（粗い点線）
solid（実線）
double（二重線）
groove（谷線）
ridge（山線）
inset（内線）
outset（外線）
inherit（継承） | 左側の線の種類 |
| border-color | borderColor | border-top-color、border-right-color、border-bottom-color、border-left-colorを一度に指定
上、右、下、左の順に半角スペースで空けて指定 | 上下左右のボーダー色 |
| border-top-color | borderTopColor | 色名/RGB値 | 上側の線の色 |
| border-right-color | borderRightColor | 色名/RGB値 | 右側の線の色 |
| border-bottom-color | borderBottomColor | 色名/RGB値 | 下側の線の色 |
| border-left-color | borderLeftColor | 色名/RGB値 | 左側の線の色 |
| アウトライン |
| CSS | JavaScript | 設定値 | 説明 |
| outline |
| outline-width、outline-style、outline-colorを一度に指定
（例：1px solid gray） | リンクやフォーム部品がフォーカス状態になった時に表示される薄い枠線を指定 |
| outline-width |
| thin（細線）
medium（規定値：中太線）
thick（太線）
数値+単位 | リンクやフォーム部品がフォーカス状態になった時に表示される薄い枠線の太さを指定 |
| outline-style |
| none（線無し）
dotted（点線）
dashed（粗い点線）
solid（実線）
double（二重線）
groove（谷線）
ridge（山線）
inset（内線）
outset（外線）
inherit（継承） | リンクやフォーム部品がフォーカス状態になった時に表示される薄い枠線の形式を指定 |
| outline-color |
| 色名/RGB値 | リンクやフォーム部品がフォーカス状態になった時に表示される薄い枠線の色を指定 |
| ビジュアル |
| CSS | JavaScript | 設定値 | 説明 |
| display | display | block（ブロック要素）
inline（インライン要素）
list-item（リスト要素）
none（表示しない） | 表示形式 |
| position | position | static（規定値：本来の位置）
relative（本来の位置からの相対位置指定）
absolute（絶対位置指定）
fixed（絶対位置に固定）
inherit（継承） | 配置方式 |
| top | top | 上端からの距離を指定 | 上からの位置 |
| left | left | 左端からの距離を指定 | 左からの位置 |
| bottom | bottom | 下端からの距離を指定 | 下からの位置 |
| right | right | 右端からの距離を指定 | 右からの位置 |
| float | styleFloat | left（左端）
right（右端）
none（規定値：指定しない）
inherit（継承） | 回り込み配置 |
| clear | clear | none（規定値：何もしない）
left（左側の回りこみ解除）
right（右側の回りこみを解除）
both（両側の回りこみを解除） | テキストの回りこみ解除 |
| z-index | zIndex | 重なりの順序を指定 | 重なり順序 |
| direction | direction | ltr（規定値：左から右）
rtl（右から左）
inherit（継承） | 文章の方向を指定 |
| unicode-bidi | unicodeBidi | normal（規定値：通常）
bidi-override（direction を有効にする）
embed（無効にする）
inherit（継承） | directionの有効/無効 |
| width | width | 横幅を指定 | 幅 |
| height | height | 高さを指定 | 高さ |
| vertical-align | verticalAlign | baseline（ベースラインあわせ）
middle（中央あわせ）
sub（下付き文字の位置）
super（上付き文字の位置）
text-top（テキストの上限あわせ）
text-bottom（テキストの下限あわせ）
top（上端あわせ）
bottom（下端あわせ）
inherit（継承） | 縦方向のテキスト位置 |
| overflow | overflow | visible（規定値：表示する）
hidden（隠す）
scroll（スクロールバーで表示する）
auto（自動）
inherit（継承） | オーバーフローを指定 |
| overflow-x | overflowX | visible（規定値：表示する）
hidden（隠す）
scroll（スクロールバーで表示する）
auto（自動）
inherit（継承） | オーバーフローの横軸を指定 |
| overflow-y | overflowY | visible（規定値：表示する）
hidden（隠す）
scroll（スクロールバーで表示する）
auto（自動）
inherit（継承） | オーバーフローの縦軸を指定 |
| clip | clip | auto（規定値：自動）
inherit（継承）
rect(99px,99px,99px,99px) 形式
position:absoluteと併用したときのみ有効 | 表示範囲 |
| visibility | visibility | visible（規定値：表示する）
hidden（表示しない）
inherit（継承） | 可視・不可視 |
| リスト |
| CSS | JavaScript | 設定値 | 説明 |
| list-style | listStyle | list-style-type, list-style-image, list-style-position を一度に指定 | リストのスタイル |
| list-style-type | listStyleType | disc（規定値：黒丸）
circle（白丸）
square（四角）
decimal（1, 2, 3...）
lower-roman（i, ii, iii...）
upper-roman（I, II, III...）
lower-alpha（a, b, c...）
upper-alpha（A, B, C...）
decimal-leading-zero（01, 02, 03...）
lower-greek（α、β、γ...）
upper-greek（Α、Β、Γ...）
lower-latin（小文字ラテン文字）
upper-latin（大文字ラテン文字）
hebrew（ヘブライ数字）
armenian（アルメニア数字）
georgian（グルジア数字）
cjk-ideographic（一、二、三...）
hiragana（あ、い、う...）
katakana（ア、イ、ウ...）
hiragana-iroha（い、ろ、は...）
katakana-iroha（イ、ロ、ハ...）
none（なし）
inherit（継承） | リストのスタイルタイプ |
| list-style-position | listStylePosition | outside（規定値：外側）
inside（内側）
inherit（継承） | リストのスタイル位置 |
| list-style-image | listStyleImage | URL
none（無し）
inherit（継承） | リストのスタイルイメージ |
| 印刷 |
| CSS | JavaScript | 設定値 | 説明 |
| page-break-before | pageBreakBefore | auto（規定値：自動）
always（常に改ページ）
avoid（改ページしない）
left（次ページが左ページとなるように改ページ）
right（次のページが右ページとなるように改ページ）
inherit（継承） | 印刷時に要素の直前で改ページ |
| page-break-after | pageBreakAfter | auto（規定値：自動）
always（常に改ページ）
avoid（改ページしない）
left（次ページが左ページとなるように改ページ）
right（次のページが右ページとなるように改ページ）
inherit（継承） | 印刷時に要素の直後で改ページ |
| page-break-inside |
| avoid（改ページしない）
auto（規定値：自動）
inherit（継承） | 要素の途中で改ページすることを禁止 |
| size |
| 横幅 高さ
auto（プリンタに合わせて自動印字）
portrait（縦方向印字）
landscape（横方向印字） | 印刷時のページサイズ |
| marks |
| crop（裁断トンボ）
cross（調整トンボ）
none（規定値：無し）
inherit（継承） | 印刷時につけるトンボを指定 |
| page |
| @page land { size: landscape; }
#abc { page: land; } | 定義しておいたページ設定の名前を参照 |
| orphans |
| 数値 | ページ最下部の段落に最低限印字すべき行数 |
| widows |
| 数値 | ページ最上部の段落に最低限印字すべき行数 |
| 背景 |
| CSS | JavaScript | 設定値 | 説明 |
| background | background | color, image, repeat, attachment, positionを一度に指定
順序は自由、省略可能 | 背景関連 |
| background-color | backgroundColor | 色名/RGB値
transparent（規定値：透明色）
inherit（継承） | 背景色 |
| background-image | backgroundImage | URL
none（規定値：画像なし）
inherit（継承） | 背景画像 |
| background-repeat | backgroundRepeat | repeat（規定値：敷き詰める）
repeat-x（横方向のみ並べる）
repeat-y（縦方向のみ並べる）
no-repeat（ひとつだけ表示する）
inherit（継承） | 背景画像の繰り返し |
| background-attachment | backgroundAttachment | scroll（規定値：一緒にスクロールする）
fixed（スクロールしない）
inherit（継承） | スクロール時の背景動作 |
| background-position | backgroundPosition | 背景の横方向の位置をleft（左端）、center（中央）、right（右端）または 50% のような割合で指定
縦方向の位置を top（上端）、center（中央）、bottom（下端）または 50% のような割合で指定
（例：left top） | 背景画像位置 |
| フォント |
| CSS | JavaScript | 設定値 | 説明 |
| font | font | style、variant、weight、size、height、familyを一度に指定
heightを指定する時はsizeの後にスラッシュ（ / ）で区切って指定
sizeとfamily以外は省略可能 | フォント関連 |
| font-style | fontStyle | normal（規定値：通常）
italic（イタリック）
oblique（斜め）
inherit（継承） | フォントスタイル |
| font-variant | fontVariant | normal（規定値：通常）
small-caps（大文字）
inherit（継承） | アルファベットの大文字化 |
| font-weight | fontWeight | normal（規定値）
bold
bolder
lighter | フォントの太さ |
| font-size | fontSize | xx-small
x-small
small
medium（規定値）
large
x-large
xx-large
larger
smaller
数値+単位
数値+パーセント | フォントサイズ |
| line-height | lineHeight | 数値+単位
数値+パーセント | 行の高さ |
| font-family | fontFamily | カンマ（,）で複数指定
スペースを含むフォントは"..."か'...'で囲む | フォント |
| テキスト |
| CSS | JavaScript | 設定値 | 説明 |
| text-indent | textIndent | 数値+単位
数値+パーセント
inherit（継承） | テキストのインデント |
| text-align | textAlign | left（規定値：左寄せ）
right（右寄せ）
center（センタリング）
justify（両端揃え）
inherit（継承） | テキストの表示位置 |
| text-justify | textJustify | auto（規定値）
newspaper（英文向け）
inter-word（単語間のみによる調整）
distribute-all-lines（最後の行も調整）
inter-ideograph（単語間と文字間による調整）
inter-cluster（アジア言語向け）
distribute（タイ言語向け）
kashida（アラビア語向け） | 単語間や文字間のスペースを調整し、文章の表示上の右端あわせを行う |
| text-decoration | textDecoration | none（何もなし）
underline（下線）
overline（上線）
line-through（打ち消し線）
blink（点滅）
inherit（継承） | テキスト修飾 |
| textDecorationBlink | true/false | テキスト修飾 |
| textDecorationLineThrough | true/false | テキスト修飾 |
| textDecorationNone | true/false | テキスト修飾 |
| textDecorationOverline | true/false | テキスト修飾 |
| textDecorationUnderline | true/false | テキスト修飾 |
| text-underline-position | textUnderlinePosition | below（規定値：下側）
above（上側） | 下線の位置 |
| text-shadow |
| none（無し）
inherit（継承）
色、影の右方向へのずれ、影の下方向へのずれ、影のブレを半角スペースで区切って指定
カンマで区切って複数の影を指定可能
（例：H1 { text-shadow: red 1px 2px 3px, 4px 5px; }） | テキストの影を指定 |
| letter-spacing | letterSpacing | normal（規定値）
数値+単位
inherit（継承） | 文字間スペース |
| word-spacing | wordSpacing | normal（規定値）
数値+単位
inherit（継承） | 各ワード間のスペースを指定 |
| text-transform | textTransform | capitalize（各単語の最初の文字を大文字にする）
uppercase（すべて大文字にする）
lowercase（すべて小文字にする）
none（規定値：何もしない）
inherit（継承） | 大文字、小文字変換を指定 |
| white-space | whiteSpace | normal（規定値：通常）
pre（自動改行しない、空白そのまま）
nowrap（自動改行しない、空白はつめる）
inherit（継承） | 要素の中の空白がどのように扱われるかを指定 |
| line-break | lineBreak | normal（規定値：通常通り「。」や「、」が禁則処理される）
strict（「っ」や「ゃ」なども禁則処理される） | 行末の禁則処理を指定 |
| word-break | wordBreak | normal（規定値：英文のみ単語の切れ目で改行）
break-all（英文、和文共に単語の途中でも改行）
keep-all（英文、和文共に単語の切れ目で改行） | 行末の単語禁則処理を指定 |
| ruby-align | rubyAlign | auto（規定値：自動）
left（左寄）
center（中央）
right（右寄）
distribute-letter（両端揃え）
distribute-space（均割）
line-edge（行末での処理変更） | <ruby>要素に対してルビの配置を指定 |
| ruby-overhang | rubyOverhang | auto（規定値：はみ出す）
whitespace（スペース文字分までははみ出す）
none（はみ出さない） | ルビが長い場合のはみ出し具合を指定 |
| ruby-position | rubyPosition | above（規定値：上部）
inline（横） | <ruby>要素に対してルビの配置を指定 |
| layout-grid | layoutGrid | mode、type、line、charを一度に指定 | 行間や文字間のスペースを調整 |
| layout-grid-line | layoutGridLine | none（規定値：指定無し）
auto（自動）
数値+単位
数値+パーセント | 行間のスペース指定 |
| layout-grid-char | layoutGridChar | none（規定値：指定無し）
auto（自動）
数値+単位
数値+パーセント | 文字間のスペース指定 |
| layout-grid-mode | layoutGridMode | both（規定値：line と char の両方を適用する）
none（どちらも適用しない）
line（line のみを適用する）
char（char のみを適用する） | 行間や文字間のスペース適用モードを指定 |
| layout-grid-type | layoutGridType | loose（規定値：日本語や韓国語に適した方法）
strict（中国語にも適した方法）
fixed（固定） | 行間や文字間のスペース適用タイプを指定 |
| text-autospace | textAutospace | none（規定値：隙間を入れない）
ideograph-alpha（表意文字と非表意文字の間に入れる）
ideograph-numeric（表意文字と数字の間に入れる）
ideograph-parenthesis（表意文字と括弧の間に入れる）
ideograph-space（表意文字の位置に適合するように入れる） | 漢字のような表意文字と非表意文字の間に隙間を設定 |
| text-kashida-space | textKashidaSpace | 数値+パーセント
inherit（継承） | アラビア語等のテキスト配置設定 |
| writing-mode | writingMode | lr-tb（横書き：left to right, top to bottom）
tb-rl（縦書き：top to bottom, right to left） | 縦書き設定 |
| テーブル |
| CSS | JavaScript | 設定値 | 説明 |
| caption-side |
| top（上）
bottom（下）
right（右）
left（左）
inherit（継承） | テーブルのキャプションの位置 |
| table-layout | tableLayout | auto（規定値：自動）
fixed（固定）
inherit（継承） | テーブルのレイアウト方法 |
| border-collapse | borderCollapse | collapse（隣のセルの枠線と重ねて表示）
separate（隣のセルとすこし離して表示）
inherit（継承） | テーブルの各セルの枠線の表示 |
| border-spacing |
| 数値+単位 | border-collapse: separate; を指定した際の隙間 |
| empty-cells |
| show（表示する）
hide（表示しない）
inherit（継承） | 中身のないセルの枠線表示 |
| ユーザインタフェース |
| CSS | JavaScript | 設定値 | 説明 |
| cursor | cursor | auto（規定値：自動）
crosshair（十字印）
default（通常のもの）
pointer（ポインタ）
move（移動用）
e-resize（右リサイズ）
ne-resize（右上リサイズ）
nw-resize（左上リサイズ）
n-resize（上リサイズ）
se-resize（右下リサイズ）
sw-resize（左下リサイズ）
s-resize（下リサイズ）
w-resize（左リサイズ）
text（テキスト選択）
wait（待ち）
help（ヘルプ）
inherit （継承）
URL指定 | カーソル |
| ime-mode | imeMode | auto（規定値：自動）
active（フォーカス移動時にオン）
inactive（フォーカス移動時にオフ）
disabled（IME使用を禁止） | IMEモード |
| scrollbar-base-color | scrollbarBaseColor | 色名/RGB値 | スクロールバーの色 |
| scrollbar-track-color | scrollbarTrackColor | 色名/RGB値 | スクロールバーの色 |
| scrollbar-face-color | scrollbarFaceColor | 色名/RGB値 | スクロールバーの色 |
| scrollbar-shadow-color | scrollbarShadowColor | 色名/RGB値 | スクロールバーの色 |
| scrollbar-darkshadow-color | scrollbarDarkShadowColor | 色名/RGB値 | スクロールバーの色 |
| scrollbar-highlight-color | scrollbarHighlightColor | 色名/RGB値 | スクロールバーの色 |
| scrollbar-3dlight-color | scrollbar3dLightColor | 色名/RGB値 | スクロールバーの色 |
| scrollbar-arrow-color | scrollbarArrowColor | 色名/RGB値 | スクロールバーの色 |
|
|
