네이티브 js에서 CSS 스타일을 변경하는 두 가지 방법-JS 튜토리얼-php.cn

네이티브 js에서 CSS 스타일을 변경하는 두 가지 방법

迷茫

풀어 주다： 2017-03-26 16:58:47

원래의

1765명이 탐색했습니다.

아래에서는 네이티브 js에서 CSS 스타일을 변경하는 두 가지 방법을 소개합니다.

1자바스크립트 코드의 노드를 통해. .cssText="css 표현식 1; css 표현식 2; css 표현식 3 " CSS 스타일을 직접 변경합니다.

2먼저 CSS 스타일 시트의 "active class"와 같은 특정 클래스에 대한 스타일을 설정합니다(여기서는 active 클래스가 가정되어 당분간 존재하지 않습니다). 그런 다음 javascript 코드에서 node.classname="active"를 통해 CSS 스타일 시트의 활성 클래스 스타일 설정을 노드 노드에 첨부합니다.

다음은 자세한 소개입니다. 첫 번째는 html 코드입니다.

<style type="text/css">
           p {
			float: left;
			padding: 20px;
			margin: 10px;
			border: 1px solid #000;
			background-color: #fff;
			color: #000;
		}
           .active
                {
                       background-color:blue
                }
</style>
<body>
      <p class="root">
      </p>
</body>

로그인 후 복사

는 단순한 p이고, 실행 결과는

입니다. 위 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 문이 상대적으로 복잡한 경우 분명히 두 번째 방법이 더 체계적입니다.

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