How to change the value of css display attribute in js

JS method to change the css display attribute value: first use the "document.getElementById("id value")" statement to obtain the specified element object; then use the "element object.style.display="value"" statement to Just change the value of the display attribute.

The operating environment of this tutorial: windows7 system, javascript version 1.8.5, Dell G3 computer.

HTML DOM allows JavaScript to change the style of HTML elements. So how does js change the value of the css display attribute?

Syntax:

Object.style.display="值";

Example:

Known :

<div class="login1" id="login">页面ID为login的元素</div>
<div class="login2" id="regist">页面ID为regist的元素</div>

Code:

<script>
document.getElementById("login").style.display = "none"; //（login为需要隐藏的页面ID）
document.getElementById("regist").style.display = "block" //（regist为需要显示的页面ID）
</script>

Description: Method to obtain Object element object:

1. Get element based on id

document.getElementById("id属性的值");

2. Get the element based on the tag name

document.getElementsByTagName("标签的名字");

3. Get the element based on the value of the name attribute

document.getElementsByName("name属性的值");

4. Get the element based on the class attribute

document.getElementsByClassName("类样式的名字");

5 .Get elements based on css path (get one)

document.querySelector("css路径");

6. Get elements based on css path (get a group)

document.querySelectorAll("css路径");

[Recommended learning: javascript advanced tutorial]

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