표시 숨기기 자바스크립트

제목: 프론트엔드 스킬 마스터 - Javascript 표시 및 숨기기

프런트엔드 개발에서 표시 및 숨기기는 자주 사용되는 기능입니다. 예를 들어, 대화형 효과를 얻거나 페이지 경험을 최적화하기 위해 특정 조건에서 일부 요소를 표시하거나 숨겨야 하는 경우가 많습니다. 이 글에서는 프론트엔드 기술을 익히기 위해 자바스크립트 코드를 표시하고 숨기는 구현 방법을 소개합니다.

1. CSS를 통해 표시 및 숨기기

가장 간단하게 구현하는 방법은 CSS의 표시 속성을 통해 요소를 표시하고 숨기는 것입니다.

요소를 표시해야 하는 경우 표시 속성 값을 block 또는 inline-block으로 설정하세요.

display: block | inline-block;

요소를 숨겨야 하는 경우 표시 속성 값을 없음으로 설정하세요.

display: none;

하지만 이 방법은 제공을 희생합니다. 약간의 유연성. 요소를 완전히 숨기지 않고 요소의 투명도나 위치만 제어하려는 경우에는 이 방법이 다소 부적절해 보입니다.

2. jQuery를 통한 표시 및 숨기기

jQuery 프레임워크는 표시 및 숨기기를 위한 특정 방법을 제공합니다. jQuery의 fadeIn() 및 fadeOut() 메소드를 통해 요소의 그라데이션 표시 및 숨기기를 쉽게 구현할 수 있습니다.

// 显示元素
$(selector).fadeIn(speed,callback);

// 隐藏元素
$(selector).fadeOut(speed,callback);

그 중 selector는 표시 및 숨기기를 제어할 요소의 선택자입니다. 속도는 그라디언트의 속도입니다. callback은 그래디언트가 완료될 때 호출되는 콜백 함수입니다.

또한 jQuery는 요소의 상태에 따라 전환할 수 있는 전환() 메서드도 제공합니다. 즉, 요소가 표시될 때 숨기고, 요소가 숨겨질 때 표시합니다.

$(selector).toggle(speed,callback);

3. 네이티브 Javascript를 통해 표시 및 숨기기 실현

jQuery와 같은 프레임워크 사용을 피해야 할 경우 일반적으로 요소를 표시하고 숨기기 위해 기본 Javascript를 사용해야 합니다. 요소의 스타일을 수정하거나 요소의 가시성 속성 값을 직접 설정하여 이를 수행할 수 있습니다.

방법 1: 요소 스타일 수정

요소 스타일을 수정하여 요소를 표시하거나 숨길 수 있습니다. 요소를 표시해야 하는 경우 스타일의 표시 속성 값을 block 또는 inline-block으로 설정합니다.

// 显示元素
document.getElementById("element_id").style.display = "block | inline-block";

요소를 숨겨야 하는 경우 해당 스타일의 표시 속성 값을 none으로 설정합니다.

// 隐藏元素
document.getElementById("element_id").style.display = "none";

메서드 2: 요소 가시성 속성 설정

또 다른 방법은 요소의 가시성 속성을 설정하여 요소를 표시하고 숨기는 것입니다. 이 접근 방식은 요소의 크기와 위치를 유지합니다.

요소를 표시해야 하는 경우 가시성 속성 값을 visible로 설정하세요:

// 显示元素
document.getElementById("element_id").style.visibility = "visible";

요소를 숨겨야 하는 경우 가시성 속성 값을 Hidden:

// 隐藏元素
document.getElementById("element_id").style.visibility = "hidden";

visibility 속성을 사용할 때 주의해야 합니다. 요소를 숨기더라도 해당 요소는 여전히 페이지에서 해당 위치를 차지합니다.

4. React를 통한 표시 및 숨기기

React에서는 일반적으로 구성 요소의 상태를 사용하여 요소의 표시 및 숨기기를 제어합니다. 구성 요소의 상태가 변경되면 React는 요소를 표시하거나 숨기기 위해 페이지를 자동으로 다시 렌더링합니다.

예를 들어 다음 코드는 버튼을 클릭하여 요소를 표시하고 숨깁니다.

import React, { Component } from 'react';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      showElement: false
    };
  }
  
  toggleElement = () => {
    this.setState({
      showElement: !this.state.showElement
    });
  }
  
  render() {
    const { showElement } = this.state;
    return (
      <div>
        <button onClick={this.toggleElement}>Toggle Element</button>
        {showElement && <div>Element Content</div>}
      </div>
    );
  }
}

위 코드에서 showElement는 요소의 표시 및 숨기기를 제어하는 ​​데 사용되는 상태입니다. 버튼을 클릭하면ggleElement() 메서드가 상태 변경을 트리거하고 페이지를 다시 렌더링합니다. showElement가 true이면 요소가 페이지에 표시되고, showElement가 false이면 요소가 숨겨집니다.

위는 몇 가지 일반적인 표시 및 숨기기 구현 방법입니다. 기본 Javascript, jQuery 또는 React를 사용하든 적절한 구현 방법을 선택하기만 하면 필요할 때 요소를 표시하고 필요하지 않을 때 숨길 수 있습니다. 페이지 성능 및 사용자 경험 향상.

위 내용은 표시 숨기기 자바스크립트의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!