기본 JavaScript로 CSS 속성을 수정하는 방법에 대한 자세한 코드 예

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

JS를 사용하여 태그의 클래스 속성 값을 수정하세요.

클래스 속성은 태그의 스타일 시트를 참조하는 방법 중 하나입니다. 해당 값은 스타일 시트의 선택자입니다. class 속성이 변경되면 태그가 참조하는 값이 변경됩니다. 스타일 시트도 교체되었으므로 이것이 첫 번째 수정 방법입니다.

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

document.getElementById( id ).className = string;

document.getElementById( id )는 레이블에 해당하는 DOM 개체를 가져오는 데 사용됩니다. 그것을 얻으려면 다른 방법을 사용하십시오. className은 레이블의 클래스 속성에 해당하는 DOM 객체의 속성입니다. 문자열은 정의된 CSS 선택기여야 하는 클래스 속성 의 새 값입니다.

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

예:

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

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

레이블의 CSS 속성을 변경하는 코드는 다음과 같습니다.

document.getElementById( id ).style.Attribute name = value;
document.getElementById( id )는 레이블에 해당하는 DOM 개체를 가져오는 데 사용됩니다. 다른 방법인 Get을 사용할 수도 있습니다. 스타일은 그 자체가 객체인 DOM 객체의 속성입니다. 속성 이름은 특정 CSS 속성에 해당하는 Style 개체의 속성 이름입니다.

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

예:

p id="t2">欢迎光临！</p> 
<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>

위 내용은 기본 JavaScript로 CSS 속성을 수정하는 방법에 대한 자세한 코드 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!