JavaScript_javascript スキルにおける CSS プロパティと命名規則の簡単な分析

多くの CSS スタイル プロパティの名前にはハイフンが含まれており、JavaScript ではマイナス記号として解釈されます。

したがって、CSS2Properties オブジェクトのプロパティ名は、実際の CSS プロパティ名とは少し異なります。

CSS プロパティ名に 1 つ以上のハイフンが含まれている場合、JS でハイフンを削除し、ハイフンの直後の元の文字を大文字に変更する必要があります。

float は JS のキーワードであるため、JS では float は cssFloat または floatStyle として記述されることに注意してください。

以下は、CSS プロパティと JavaScript の CSS エンコーディングの比較表です。

Box タグと属性の比較:
コード
CSS 構文 (大文字と小文字を区別しない) JavaScript 構文 (大文字と小文字を区別する)
border border
border-bottom borderBottom
border-bottom-color borderBottomColor
border-bottom-style borderBottomStyle
border-bottom-width borderBottomWidth
border-color borderColor
border-left borderLeft
border-left - カラー BorderLeftColor
Border-Left-Style BorderhardStyle
Border-Left-Width BorderLeftwidth
Border-Right BorderRight
Border-COLOR BORERRIGHT Color Border-Right-Style BorderRightStyle
Border- right-width borderRightWidth
border-style borderStyle
border-top borderTop
border-top-color borderTopColor
border-top-style borderTopStyle
border -top-width borderTopWidth
border - 幅 borderWidth
clear Clear
float floatStyle(ie) cssFloat(FF)
margin margin
margin-bottom marginBottom
margin-left marginLeft
マージン-右 marginRight
マージン-トップ marginTop
パディング パディング
パディングボトム パディングボトム
パディング左 パディング左
パディング右 パディング右
パディングトップパディングトップ

色と背景のタグと属性の比較:
コードCSS 構文 (大文字と小文字を区別しない) JavaScript 構文 (大文字と小文字を区別する)
background 背景
background-attachment backgroundAttachment
背景色 | 背景画像
背景位置
背景繰り返し

スタイルタグと属性の比較:

コードCSS 構文 (大文字と小文字を区別しない) JavaScript 構文 (大文字と小文字を区別する)

display display

list-style-type listStyleType
list-style-image listStyleImage
list-style -position listStylePosition
list-style listStyle
white-space whiteSpace

テキスト スタイル タグと属性の比較:

コードCSS構文（大文字と小文字を区別しない） JavaScript構文（大文字と小文字を区別する）

font >font-variant fontVariant

font-weight fontWeight




テキストタグと属性の比較:

コード

CSS 構文 (大文字と小文字を区別しない) JavaScript 構文 (大文字と小文字を区別する)

letter-spacing letterSpacing

line-break lineBreak

line-height lineHeighttext-align textAlign
text-decoration textDecorationtext-indent textIndent
text-justify textJustify
text-transform textTransform
vertical-alignverticalAlign