JavaScript_javascript 기술로 CSS 속성을 수정하는 코드

JavaScript로 CSS 속성을 수정하려면 기본 JavaScript를 작성하기만 하면 됩니다.

1. JS를 사용하여 태그의 클래스 속성 값을 수정합니다.

클래스 속성은 태그에서 스타일 시트를 참조하는 방법 중 하나입니다. 해당 값은 스타일 시트 선택기이며, 클래스 속성의 값이 변경되면 태그가 참조하는 스타일 시트도 변경되므로 이것이 첫 번째 수정 방법입니다.

태그의 클래스 속성을 변경하는 코드는 다음과 같습니다.

document.getElementById( id ).className = string
document.getElementById( id )는 DOM을 가져오는 데 사용됩니다. Object 태그에 해당하는 경우 다른 방법을 사용하여 얻을 수도 있습니다. className은 레이블의 클래스 속성에 해당하는 DOM 객체의 속성입니다. 문자열은 정의된 CSS 선택기여야 하는 클래스 속성의 새 값입니다.

이 방법을 사용하면 태그의 CSS 스타일시트를 다른 스타일시트로 교체하거나, CSS 스타일이 적용되지 않은 태그에 지정된 스타일을 적용할 수 있습니다.

예:

코드 복사 코드는 다음과 같습니다.

< ;style type="text/css">
.txt {
글꼴 크기: 30px; 글꼴 무게: 굵은 색

환영합니다!

스타일 변경

2. JS를 사용하여 태그의 스타일 속성 값을 수정합니다.

스타일 속성도 태그의 스타일 시트와 해당 값을 참조하는 방법 중 하나입니다. CSS 스타일 시트입니다. DOM 객체에도 스타일 속성이 있지만 이 속성 자체도 객체입니다. Style 객체의 속성은 CSS 속성과 일대일로 대응됩니다. 해당 태그도 변경되므로 이것이 두 번째 수정 방법입니다.
레이블의 CSS 속성을 변경하는 코드는 다음과 같습니다.

document.getElementById( id ).style.property name = value
document.getElementById( id )는 다음과 같습니다. 해당 레이블을 얻습니다. 다른 방법을 사용하여 DOM 객체를 얻을 수도 있습니다. 스타일은 그 자체가 객체인 DOM 객체의 속성입니다. 속성 이름은 특정 CSS 속성에 해당하는 Style 객체의 속성 이름입니다.

참고: 이 방법은 단일 CSS 속성을 수정하며 레이블의 다른 CSS 속성 값에는 영향을 주지 않습니다.

예:

코드 복사 코드는 다음과 같습니다.

div id="t2">환영합니다!

크기
색상
배경
테두리

방법:

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