How to change css display with js

In the process of web development, we often need to change the style through JavaScript. One of the frequently used scenarios is changing the visibility of an element. In CSS, you can use the display attribute to control the visibility of an element. In JavaScript, we can use the DOM to access and modify the style of elements to control the visibility of elements.

1. Display attribute

The display attribute is used to control the way an element is displayed in the document. Its value can be the following:

1. none: The element is not rendered, that is, it is not displayed in the document.
2. block: The element is rendered as a block-level element, that is, the element will occupy an entire row.
3. inline: The element is rendered as an inline element, that is, the element does not occupy an entire line, but is displayed within one line.
4. inline-block: The element is rendered as an inline block-level element, that is, the element will be displayed in one line, and the width, height, border and other styles can be set.
5. table, table-row, table-cell: elements are rendered as table-related elements. table renders elements as tables, table-row renders elements as table rows, and table-cell renders elements as table cells.
6. flex, inline-flex: Elements are rendered as flex containers, which can be used to implement responsive layout and other scenarios.

2. JavaScript operation display attribute

In JavaScript, we can obtain and modify the display attribute of an element through the DOM. First, we need to obtain the element that needs to be operated through the getElementById() method of the document object. This method needs to pass in the element ID that needs to be obtained, for example:

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

The above code will obtain the element with the ID "myDiv" and assign it to the variable myDiv. Next, we can access the element's style attributes through the style attribute. For example, you can use the following code to set the element's display attribute to none, so that the element is not displayed on the page:

myDiv.style.display = 'none';

We can also display and hide elements by judging the element's display attribute. For example, the following code allows the element to be displayed by setting its display attribute to block if it is originally hidden:

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

If the element is originally displayed, it can set its display attribute to none, thus Hidden elements:

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

3. Application scenarios

1. Hide and show pop-up layers

In web development, it is often necessary to use pop-up layers to display more information. More content or interactivity. The popup layer usually needs to be triggered when the user clicks a button or link, and closed when the user clicks the "Close" button. To achieve this function, we can use JavaScript to modify the display attribute of the popup layer. In the initial state of the pop-up layer, you can set its display attribute to none, which means it will not be displayed on the page. When the user clicks the button or link that triggers the pop-up layer, the pop-up layer's display attribute can be set to block to display the pop-up layer. When the user clicks the "Close" button in the pop-up layer, the pop-up layer's display property can be set to none to close the pop-up layer.

2. Implement responsive layout

Responsive layout refers to the display screen size of different devices, by adjusting the layout and style to adapt to different display screen sizes. When implementing responsive layout, we usually need to adjust the display mode and position of certain elements according to the screen size. Among them, the display attribute can be used to control the display mode of elements to achieve responsive layout. For example, in a typical navigation bar, we want to display the items of the navigation bar arranged horizontally when the screen width is less than a certain threshold, and vertically when the screen width is greater than that threshold. This responsive layout can be achieved by changing the display attributes of each item in the navigation bar.

3. Controlling element visibility based on user behavior

In some scenarios, we want to control the visibility of an element based on user behavior. For example, when the user enters a keyword in the search box, we want to display the search results column. At this time, you can monitor the input event of the search box, and when the user enters a keyword, set the display attribute of the search results column to block to display the search results. If the user clears the keywords, the search results can be hidden by setting the display attribute of the search results column to none.

4. Summary

By modifying the display attribute of an element, we can control the visibility of the element and implement a variety of web development scenarios. When implementing these scenarios, we need to obtain and modify the style attributes of elements through JavaScript. Mastering this technology can help us better complete various tasks in web development.

The above is the detailed content of How to change css display with js. For more information, please follow other related articles on the PHP Chinese website!