네이티브 js에서 CSS를 수정하는 방법
- 醉折花枝作酒筹원래의
- 2021-07-23 10:20:083550검색
방법은 다음과 같습니다. 1. node.style.cssText="css 표현식 1; css 표현식 2; css 표현식 3"; 2. 먼저 CSS 스타일 시트에서 특정 클래스에 대한 스타일을 설정한 다음 노드를 전달합니다. classname="class name"은 클래스의 스타일 설정을 노드 노드에 연결합니다.
이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.
이제 네이티브 js에서 CSS 스타일을 변경하는 두 가지 방법을 소개하겠습니다:
1By node.style.cssText="css 표현식 1; css 표현식 2; 자바스크립트 코드에서; CSS 표현식 3 " CSS 스타일을 직접 변경합니다.
2먼저 CSS 스타일 시트에서 "active class"와 같은 특정 클래스에 대한 스타일을 설정한 다음(여기서 active 클래스는 가정되며 당분간 존재하지 않습니다) node.classname="을 전달합니다. javascript 코드 "의 active"는 CSS 스타일 시트에 있는 활성 클래스의 스타일 설정이 노드 노드에 연결되도록 합니다.
다음은 자세한 소개입니다. 첫 번째는 HTML 코드입니다.
<style type="text/css">
div {
float: left;
padding: 20px;
margin: 10px;
border: 1px solid #000;
background-color: #fff;
color: #000;
}
.active
{
background-color:blue
}
</style>
<body>
<div class="root">
</div>
</body>먼저 위에서 언급한 첫 번째 방법을 사용하여 CSS 스타일을 변경하고 다음 자바스크립트 코드를 작성합니다.
<script type="text/javascript">
var root=document.getElementsByClassName("root")[0];
root.style.cssText="background-color: blue;color: #fff;";
</script>실행 결과는 다음과 같습니다.
그런 다음 위에서 언급한 두 번째 방법을 사용하여 CSS 스타일을 변경하고 다음 자바스크립트 코드를 작성합니다.
<script type="text/javascript">
var root=document.getElementsByClassName("root")[0];
root.className="active";</script>동일한 실행 결과는 다음과 같습니다.
요약: 이 두 가지 방법의 결과는 동일하지만 측면에서 보면 작업 프로세스, 두 번째 방법인 "node.classname" 방법은 CSS와 js 작성을 분리하는데, 이는 분명히 더 합리적이고 질서정연합니다. CSS 문이 상대적으로 간단한 경우 두 방법 사이에 차이가 없지만 CSS 문이 상대적으로 복잡한 경우 분명히 두 번째 방법이 더 체계적입니다.
추천 학습: css 비디오 튜토리얼
위 내용은 네이티브 js에서 CSS를 수정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!