> 웹 프론트엔드 > JS 튜토리얼 > js에서 CSS 표시 속성 값을 변경하는 방법

js에서 CSS 표시 속성 값을 변경하는 방법

青灯夜游
풀어 주다: 2023-01-06 11:12:18
원래의
10896명이 탐색했습니다.

JS 메서드를 사용하여 CSS 표시 속성 값을 변경합니다. 먼저 "document.getElementById("id value")" 문을 사용하여 지정된 요소 개체를 얻은 다음 "element object.style.display="value"" 문을 사용합니다. 표시 속성을 변경하려면 값만 변경하세요.

js에서 CSS 표시 속성 값을 변경하는 방법

이 튜토리얼의 운영 환경: Windows 7 시스템, JavaScript 버전 1.8.5, Dell G3 컴퓨터.

HTML DOM을 사용하면 JavaScript가 HTML 요소의 스타일을 변경할 수 있습니다. 그러면 js는 CSS 표시 속성의 값을 어떻게 변경합니까?

구문:

Object.style.display="值";
로그인 후 복사

예:

알려진:

<div class="login1" id="login">页面ID为login的元素</div>
<div class="login2" id="regist">页面ID为regist的元素</div>
로그인 후 복사

코드:

<script>
document.getElementById("login").style.display = "none"; //(login为需要隐藏的页面ID)
document.getElementById("regist").style.display = "block" //(regist为需要显示的页面ID)
</script>
로그인 후 복사

설명: Object 요소를 가져오는 방법 개체:

1. id

document.getElementById("id属性的值");
로그인 후 복사

2를 기준으로 요소를 가져옵니다.

document.getElementsByTagName("标签的名字");
로그인 후 복사

3. 이름 속성 값을 기준으로 요소를 가져옵니다. 클래스 속성을 기반으로 한 요소

document.getElementsByName("name属性的值");
로그인 후 복사

5. CSS 경로를 기반으로 요소 가져오기(하나 가져오기)

document.getElementsByClassName("类样式的名字");
로그인 후 복사

6. CSS 경로를 기반으로 요소 가져오기(그룹 가져오기)

document.querySelector("css路径");
로그인 후 복사

[추천 학습:

javascript 고급 튜토리얼

]

위 내용은 js에서 CSS 표시 속성 값을 변경하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿