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