js로 CSS 디스플레이를 변경하는 방법

웹 개발 과정에서 JavaScript를 통해 스타일을 변경해야 하는 경우가 종종 있습니다. 일반적으로 사용되는 시나리오 중 하나는 요소의 가시성을 변경하는 것입니다. CSS에서는 표시 속성을 사용하여 요소의 가시성을 제어할 수 있습니다. JavaScript에서는 DOM을 사용하여 요소의 스타일에 액세스하고 수정하여 요소의 가시성을 제어할 수 있습니다.

1. 표시 속성

표시 속성은 문서에서 요소가 표시되는 방식을 제어하는 ​​데 사용됩니다. 해당 값은 다음과 같습니다.

1. none: 요소가 렌더링되지 않습니다. 즉, 문서에 표시되지 않습니다.
2. block: 요소는 블록 수준 요소로 렌더링됩니다. 즉, 요소가 전체 행을 차지합니다.
3. inline: 요소가 인라인 요소로 렌더링됩니다. 즉, 요소가 전체 줄을 차지하지 않고 한 줄 안에 표시됩니다.
4. inline-block: 요소가 인라인 블록 수준 요소로 렌더링됩니다. 즉, 요소가 한 줄에 표시되고 너비, 높이, 테두리 및 기타 스타일을 설정할 수 있습니다.
5. table, table-row, table-cell: 요소는 표 관련 요소로 렌더링됩니다. table은 요소를 테이블로 렌더링하고, table-row는 요소를 테이블 행으로 렌더링하며, table-cell은 요소를 테이블 셀로 렌더링합니다.
6. flex, inline-flex: 요소는 반응형 레이아웃 및 기타 시나리오를 구현하는 데 사용할 수 있는 플렉스 컨테이너로 렌더링됩니다.

2. JavaScript는 표시 속성을 작동합니다

JavaScript에서는 DOM을 통해 요소의 표시 속성을 얻고 수정할 수 있습니다. 먼저 문서 객체의 getElementById() 메서드를 통해 동작해야 하는 요소를 얻어야 합니다. 이 메소드는 가져와야 하는 요소 ID를 전달해야 합니다. 예:

var myDiv = document.getElementById('myDiv');

위 코드는 ID가 "myDiv"인 요소를 가져와 변수 myDiv에 할당합니다. 다음으로, style 속성을 통해 요소의 스타일 속성에 접근할 수 있습니다. 예를 들어 다음 코드를 사용하여 요소의 표시 속성을 없음으로 설정하여 요소가 페이지에 표시되지 않도록 할 수 있습니다.

myDiv.style.display = 'none';

요소의 표시 속성을 판단하여 요소를 표시하거나 숨길 수도 있습니다. 예를 들어, 다음 코드에서는 요소가 원래 숨겨진 경우 표시 속성을 차단으로 설정하여 요소가 표시되도록 허용합니다.

if (myDiv.style.display === 'none') {
  myDiv.style.display = 'block';
}

요소가 원래 표시된 경우 표시 속성을 없음으로 설정하여 요소를 숨길 수 있습니다.

if (myDiv.style.display !== 'none') {
  myDiv.style.display = 'none';
}

3. 응용 프로그램 시나리오

1. 팝업 레이어 숨기기 및 표시

웹 개발에서는 더 많은 콘텐츠를 표시하거나 상호 작용하기 위해 팝업 레이어를 사용해야 하는 경우가 많습니다. 팝업 레이어는 일반적으로 사용자가 버튼이나 링크를 클릭할 때 트리거되어야 하고, 사용자가 "닫기" 버튼을 클릭하면 닫혀야 합니다. 이 기능을 달성하기 위해 JavaScript를 사용하여 팝업 레이어의 표시 속성을 수정할 수 있습니다. 팝업 레이어의 초기 상태에서는 표시 속성을 없음으로 설정할 수 있습니다. 이는 페이지에 표시되지 않음을 의미합니다. 사용자가 팝업 레이어를 실행하는 버튼이나 링크를 클릭하면 팝업 레이어의 표시 속성을 차단으로 설정하여 팝업 레이어를 표시할 수 있습니다. 사용자가 팝업 레이어에서 "닫기" 버튼을 클릭하면 팝업 레이어의 표시 속성을 없음으로 설정하여 팝업 레이어를 닫을 수 있습니다.

2. 반응형 레이아웃 구현

반응형 레이아웃은 다양한 디스플레이 화면 크기에 맞게 레이아웃과 스타일을 조정하여 다양한 기기의 디스플레이 화면 크기를 의미합니다. 반응형 레이아웃을 구현할 때 일반적으로 화면 크기에 따라 특정 요소의 표시 모드와 위치를 조정해야 합니다. 그중에서 디스플레이 속성을 사용하면 반응형 레이아웃을 달성하기 위해 요소의 표시 모드를 제어할 수 있습니다. 예를 들어, 일반적인 탐색 모음에서는 화면 너비가 특정 임계값보다 작을 때 탐색 모음의 항목을 가로로 표시하고, 화면 너비가 해당 임계값보다 클 때 세로로 정렬하여 표시하려고 합니다. 이러한 반응형 레이아웃은 탐색 모음에서 각 항목의 표시 속성을 변경하여 구현할 수 있습니다.

3. 사용자 행동에 따라 요소 가시성 제어

일부 시나리오에서는 사용자 행동에 따라 요소의 가시성을 제어하고 싶습니다. 예를 들어 사용자가 검색 상자에 키워드를 입력하면 검색 결과 열을 표시하려고 합니다. 이때, 검색창의 입력 이벤트를 모니터링할 수 있으며, 사용자가 키워드를 입력하면 검색결과 열의 표시 속성을 차단으로 설정하여 검색결과를 표시할 수 있습니다. 사용자가 키워드를 지우면 검색 결과 열의 표시 속성을 없음으로 설정하여 검색 결과를 숨길 수 있습니다.

4. 요약

요소의 표시 속성을 수정하여 요소의 가시성을 제어하고 다양한 웹 개발 시나리오를 구현할 수 있습니다. 이러한 시나리오를 구현할 때 JavaScript를 통해 요소의 스타일 속성을 얻고 수정해야 합니다. 이 기술을 익히면 웹 개발의 다양한 작업을 더 잘 완료하는 데 도움이 될 수 있습니다.

위 내용은 js로 CSS 디스플레이를 변경하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!