네이티브 js에서 CSS 스타일을 변경하는 두 가지 방법
- 迷茫원래의
- 2017-03-26 16:58:471784검색
아래에서는 네이티브 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!