js에서 CSS 속성 값을 변경하는 방법

CSS 속성 값을 변경하는 방법: 1. "document.getElementById(id value).className=string;" 문을 사용하여 수정합니다. 2. "document.getElementById(id value).style.Attribute name=value; " 성명 수정.

이 튜토리얼의 운영 환경: Windows 7 시스템, JavaScript 버전 1.8.5, Dell G3 컴퓨터.

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

클래스 속성은 라벨의 스타일 시트를 참조하는 방법 중 하나입니다. 클래스 속성이 변경되고, 태그가 참조하는 스타일시트도 변경되므로 첫 번째 수정 방법입니다.

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

document.getElementById( id )는 태그에 해당하는 DOM 개체를 가져오는 데 사용됩니다. 다른 방법을 사용하여 가져올 수도 있습니다. className은 태그의 클래스 속성에 해당하는 DOM 객체의 속성입니다. string은 정의된 CSS 선택자여야 하는 클래스 속성의 새 값입니다.

이 방법을 사용하면 레이블의 CSS 스타일 시트를 다른 스타일 시트로 바꾸거나 CSS 스타일이 적용되지 않은 레이블에 지정된 스타일을 적용할 수도 있습니다.

예:

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

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

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

document.getElementById( id )는 태그에 해당하는 DOM 개체를 가져오는 데 사용됩니다. 다른 방법을 사용하여 가져올 수도 있습니다. 스타일은 그 자체가 객체인 DOM 객체의 속성입니다. 속성 이름은 특정 CSS 속성에 해당하는 Style 개체의 속성 이름입니다.

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

예:

메서드:

document.getElementById("xx").style.xxx의 모든 속성은 무엇입니까

ㅋㅋㅋ bot tom 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 문법(구분되지 않거나 smallcat) 배경 배경 ㅋㅋㅋ sition 배경-반복 배경반복 color color 스타일 태그 및 속성 비교 CSS 구문(대소문자 구분) JavaScript 구문(대소문자 구분) 표시 디스플레이 목록 스타일 유형 listStyleType 목록 스타일 이미지 listStyleImage 목록 스타일 위치 listStylePosition list-style listStyle 공백 whiteSpace 텍스트 스타일 태그 및 속성 비교 CSS 구문(대소문자 구분) JavaScript 구문(대소문자 구분) font font 글꼴 -family fontFamily 글꼴 크기 fontSize 글꼴-스타일 fontStyle 글꼴-변형 fontVariant 글꼴 가중치 fontWeight 텍스트 레이블 및 속성 비교 CSS 구문(대소문자 구분) JavaScript 구문(대소문자 구분) letter-spacing letterSpacing line- break lineBreak ㅋㅋㅋ textIndent text-justify textJustify text-transform textTransform vertical-align javascript 고급 튜토리얼 】

Box태그 및 속성 비교
CSS구문(대소문자 구분)	JavaScript 구문(대소문자 구분)
border	border
테두리-하단	borderBottom
border-bottom-color	borderBottomColor
border-bottom-style	borderBottomStyle
border-bottom-width	borderBottomWidth
테두리 색상	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	borderRightWid th
테두리 스타일	borderStyle
border-top	borderTop
border-top-color	borderTopColor
border-top-style	borderTopStyle
border -top- 너비	borderTopWidth
	verticalAlign
	【추천 학습:

위 내용은 js에서 CSS 속성 값을 변경하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!