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值).className = 字符串;

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

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

예:

<style type="text/css">
.txt {
font-size: 30px; font-weight: bold; color: red;
}
</style>
<div id="tt">欢迎光临！</div>
<p><button onclick="setClass()">更改样式</button></p>
<script type="text/javascript">
function setClass()
{
document.getElementById( "tt" ).className = "txt";
}
</script>

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

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

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

document.getElementById( id ).style.属性名 = 值;

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

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

예:

<div id="t2">欢迎光临！</div>
<p><button onclick="setSize()">大小</button>
<button onclick="setColor()">颜色</button>
<button onclick="setbgColor()">背景</button>
<button onclick="setBd()">边框</button>
</p>

<script type="text/javascript">
function setSize()
{
document.getElementById( "t2" ).style.fontSize = "30px";
}
function setColor()
{
document.getElementById( "t2" ).style.color = "red";
}
function setbgColor()
{
document.getElementById( "t2" ).style.backgroundColor = "blue";
}
function setBd()
{
document.getElementById( "t2" ).style.border = "3px solid #FA8072";
}
</script>

메서드:

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

ㅋㅋㅋ bot tommarginBottommargin-leftmarginLeft margin-rightmarginRightmargin-topmarginToppaddingpaddingpadding-bottom paddingBottompadding-leftpaddingLeft -Padding-RightpaddingRightpadding-Toppaddingtop 색상 및 배경 레이블 및 속성 제어 CSS 문법(구분되지 않거나 smallcat) 배경배경 ㅋㅋㅋ sition배경-반복배경반복 colorcolor스타일 태그 및 속성 비교CSS 구문(대소문자 구분)JavaScript 구문(대소문자 구분) 표시 디스플레이목록 스타일 유형listStyleType목록 스타일 이미지listStyleImage목록 스타일 위치 listStylePositionlist-stylelistStyle공백 whiteSpace텍스트 스타일 태그 및 속성 비교CSS 구문(대소문자 구분)JavaScript 구문(대소문자 구분) fontfont글꼴 -familyfontFamily글꼴 크기fontSize글꼴-스타일fontStyle글꼴-변형fontVariant 글꼴 가중치fontWeight텍스트 레이블 및 속성 비교CSS 구문(대소문자 구분)JavaScript 구문(대소문자 구분)letter-spacing letterSpacingline- breaklineBreak ㅋㅋㅋ textIndenttext-justifytextJustify text-transformtextTransformvertical-alignjavascript 고급 튜토리얼】

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!