show hide javascript

Title: Mastering Front-end Skills - Show and Hide Javascript

In front-end development, show and hide is a frequently used function. For example, we often need to show or hide some elements under certain conditions to achieve interactive effects or optimize page experience. This article will introduce the implementation method of displaying and hiding Javascript code to master front-end skills.

1. Display and hide through CSS

The simplest way to implement it is to display and hide elements through the display attribute of CSS.

When the element needs to be displayed, set its display attribute value to block or inline-block:

display: block | inline-block;

When the element needs to be hidden, set its display attribute value to none:

display: none;

But this approach does sacrifice some flexibility. If we just want to control the transparency or position of the element without hiding it completely, then this method seems to be somewhat inadequate.

2. Display and hide through jQuery

The jQuery framework provides specific methods for display and hiding. Through jQuery's fadeIn() and fadeOut() methods, we can easily realize the gradient display and hiding of elements:

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

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

Among them, selector is the selector of the element to be controlled to be displayed and hidden. Speed ​​is the speed of the gradient. callback is the callback function called when the gradient is completed.

In addition, jQuery also provides the toggle() method, which can switch according to the state of the element, that is, hide it when the element is displayed, and display it when the element is hidden:

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

三, Display and hide through native Javascript

When we need to avoid using frameworks such as jQuery, we usually need to use native Javascript to display and hide elements. We can do this by modifying the element's style or directly setting the element's visibility attribute value.

Method 1: Modify the style of the element

We can display and hide the element by modifying the style of the element. When the element needs to be displayed, we set the display attribute value of its style to block or inline-block:

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

When the element needs to be hidden, set the display attribute value of its style to none:

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

Method 2: Set the visibility attribute of the element

Another method is to display and hide the element by setting the visibility attribute of the element. This approach preserves the size and position of the element.

When the element needs to be displayed, set its visibility attribute value to visible:

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

When the element needs to be hidden, set its visibility attribute value to hidden:

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

It should be noted that when using the visibility attribute to hide an element, the element still occupies its position on the page.

4. Display and hide through React

In React, we usually use the state of the component to control the display and hiding of elements. When the component's state changes, React will automatically re-render the page to show and hide elements.

For example, the following code displays and hides elements by clicking a button:

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>
    );
  }
}

In the above code, showElement is the state used to control the display and hiding of elements. When the button is clicked, the toggleElement() method triggers a change in state and re-renders the page. When showElement is true, the element will be displayed on the page; when showElement is false, the element will be hidden.

The above are several common display and hide implementation methods. Whether you use native Javascript, jQuery, or React, as long as you choose the appropriate method to implement it, you can make the element display when needed and hide when not needed. Thereby enhancing the page interaction effect and user experience.

The above is the detailed content of show hide javascript. For more information, please follow other related articles on the PHP Chinese website!