CSS と JS は密接に連携して、多くのユニークな効果をページに追加します。特別な効果を実現するには、JavaScript を使用して特定のタグの CSS プロパティを動的に変更する必要があります。
たとえば、マウスが画像の上を通過すると、画像に境界線が追加されます。コードは次のようになります。JavaScript の style の後の属性は何ですか?
<script type="text/javascript">
関数 imageOver(e) {
e.style.border="1px 単色赤";
}
関数 imageOut(e) {
e.style.borderWidth=0;
}
</script>
<img src="css.png" onmouseover="imageOver(this)" onmouseout="imageOut(this)" />
JavaScript CSS スタイル属性比較表
ボックスのラベルと属性の比較
CSS 構文 (大文字と小文字を区別しない) JavaScript 構文 (大文字と小文字を区別する)
境界線
ボーダー下ボーダー下
border-bottom-color borderBottomColor
ボーダーボトムスタイル borderBottomStyle
ボーダー下幅borderBottomWidth
ボーダーカラー borderColor
ボーダー左ボーダー左
ボーダー左の色ボーダー左の色
ボーダー左スタイル borderLeftStyle
ボーダー左幅ボーダー左幅
ボーダー右ボーダー右
border-right-color borderRightColor
ボーダーライトスタイル borderRightStyle
ボーダー右幅 borderRightWidth
ボーダースタイル
ボーダートップ
ボーダートップカラー borderTopColor
ボーダートップスタイル borderTopStyle
ボーダー上部の幅 borderTopWidth
ボーダー幅 borderWidth
クリアクリア
フロート floatStyle
マージンマージン
マージン-下マージン下
マージン左 marginLeft
マージン右マージン右
マージントップ marginTop
パディング パディング
パディングボトム パディングボトム
パディング左paddingLeft
パディング右paddingRight
パディングトップ
色と背景のラベルと属性の比較
CSS 構文 (大文字と小文字を区別しない) JavaScript 構文 (大文字と小文字を区別する)
背景 背景
背景-添付ファイルbackgroundAttachment
背景色backgroundColor
背景画像背景画像
背景位置backgroundPosition
背景-繰り返し背景繰り返し
色 色
スタイルタグと属性の比較
CSS 構文 (大文字と小文字を区別しない) JavaScript 構文 (大文字と小文字を区別する)
ディスプレイディスプレイ
リストスタイルタイプ listStyleType
リストスタイルイメージ listStyleImage
リストスタイル位置 listStylePosition
リストスタイル listStyle
ホワイトスペース ホワイトスペース
テキストスタイルのラベルと属性の比較
CSS 構文 (大文字と小文字を区別しない) JavaScript 構文 (大文字と小文字を区別する)
フォント フォント
フォントファミリー fontFamily
フォントサイズ fontSize
フォントスタイル fontStyle
フォントバリアント fontVariant
フォントの太さ fontWeight
テキストラベルと属性の比較
CSS 構文 (大文字と小文字を区別しない) JavaScript 構文 (大文字と小文字を区別する)
文字間隔letterSpacing
改行 lineBreak
行の高さ lineHeight
テキスト整列 textAlign
テキスト装飾 textDecoration
テキストインデント textIndent
text-justify textJustify
テキスト変換 textTransform
垂直整列垂直整列