네이티브 js에서 CSS를 수정하는 방법-CSS 튜토리얼-php.cn

네이티브 js에서 CSS를 수정하는 방법

醉折花枝作酒筹

풀어 주다： 2023-01-07 11:45:18

원래의

3523명이 탐색했습니다.

방법은 다음과 같습니다. 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>

로그인 후 복사

실행 결과는 다음과 같습니다.

네이티브 js에서 CSS를 수정하는 방법

그런 다음 위에서 언급한 두 번째 방법을 사용하여 CSS 스타일을 변경하고 다음 자바스크립트 코드를 작성합니다.

<script type="text/javascript">  
       var root=document.getElementsByClassName("root")[0];
           root.className="active";</script>

로그인 후 복사

동일한 실행 결과는 다음과 같습니다.

네이티브 js에서 CSS를 수정하는 방법

요약: 이 두 가지 방법의 결과는 동일하지만 측면에서 보면 작업 프로세스, 두 번째 방법인 "node.classname" 방법은 CSS와 js 작성을 분리하는데, 이는 분명히 더 합리적이고 질서정연합니다. CSS 문이 상대적으로 간단한 경우 두 방법 사이에 차이가 없지만 CSS 문이 상대적으로 복잡한 경우 분명히 두 번째 방법이 더 체계적입니다.

추천 학습: css 비디오 튜토리얼

위 내용은 네이티브 js에서 CSS를 수정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!