JavaScript_javascript スキルを使用して CSS 属性を変更するコード

JavaScript を使用して CSS プロパティを変更するには、ネイティブ JavaScript を記述するだけで済みます。

1. JS を使用してタグのクラス属性値を変更します。

クラス属性は、タグのスタイルシートを参照する方法の 1 つです。その値はスタイルシートセレクターです。クラス属性の値が変更されると、タグによって参照されるスタイルシートも変更されるため、これが最初の変更方法です。

タグのクラス属性を変更するコードは次のとおりです:

document.getElementById( id ).className = string;
document.getElementById( id ) は DOM を取得するために使用されます。タグ Object に対応するものは、他のメソッドを使用して取得することもできます。 className は、ラベルのクラス属性に対応する DOM オブジェクトのプロパティです。文字列はクラス属性の新しい値であり、定義された CSS セレクターである必要があります。

このメソッドを使用すると、タグの CSS スタイル シートを別のスタイル シートに置き換えたり、CSS スタイルが適用されていないタグに指定したスタイルを適用したりできます。

例:

コードをコピー コードは次のとおりです:

;

ようこそ!

スタイルを変更

2. JS を使用してタグの style 属性値を変更します。

style 属性は、タグのスタイル シートとその値を参照する方法の 1 つでもあります。 CSSスタイルシートです。 DOM オブジェクトにも style 属性がありますが、この属性自体もオブジェクトです。Style オブジェクトの属性が変更されると、その CSS 属性値は 1 対 1 に対応します。対応するタグも変更されるので、これが2番目の変更方法です。

ラベルの CSS 属性を変更するコードは次のとおりです:
document.getElementById( id ).style.property name = value;
document.getElementById( id ) は次の目的で使用されます。対応するラベルを取得する 他のメソッドを使用して DOM オブジェクトを取得することもできます。 style は DOM オブジェクトのプロパティであり、それ自体がオブジェクトです。プロパティ名は、特定の CSS プロパティに対応する Style オブジェクトのプロパティ名です。

注: このメソッドは 1 つの CSS プロパティを変更しますが、ラベル上の他の CSS プロパティの値には影響しません。

例:

コードをコピー コードは次のとおりです: div id="t2">ようこそ!

サイズ

/button> 🎜>背景

方法:

document.getElementById("xx").style.xxx のすべてのプロパティは何ですか

盒子标签和属性对照
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-color	borderLeftColor
border-left-style	borderLeftStyle
border-left-width	borderLeftWidth
border-right	borderRight
border-right-color	borderRightColor
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-width	borderWidth
clear	clear
float	floatStyle
margin	margin
margin-bottom	marginBottom
margin-left	marginLeft
margin-right	marginRight
margin-top	marginTop
padding	padding
padding-bottom	paddingBottom
padding-left	paddingLeft
padding-right	paddingRight
padding-top	paddingTop
颜色和背景标签和属性对照
CSS 语法（不区分大小写）	JavaScript 语法（区分大小写）
background	background
background-attachment	backgroundAttachment
background-color	backgroundColor
background-image	backgroundImage
background-position	backgroundPosition
background-repeat	backgroundRepeat
color	color
样式标签和属性对照
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
font-family	fontFamily
font-size	fontSize
font-style	fontStyle
font-variant	fontVariant
font-weight	fontWeight
文本标签和属性对照
CSS 语法（不区分大小写）	JavaScript 语法（区分大小写）
letter-spacing	letterSpacing
line-break	lineBreak
line-height	lineHeight
text-align	textAlign
text-decoration	textDecoration
text-indent	textIndent
text-justify	textJustify
text-transform	textTransform
vertical-align	verticalAlign