js中怎么控制一个标签的显示与隐藏

2025年02月11日 00:15

有5个网友回答

网友（1）：

利用来JS控制页面控件显示和隐藏有两种方法，两种方法分别利用HTML的style中的两个属性，两种方法的不同之处在于控件隐藏后是否还在页面上占空位。

方法一：

document.getElementById("EleId").style.visibility="hidden";'设置EleId标签隐藏
document.getElementById("EleId").style.visibility="visible";设置EleId标签显示

利用上述方法实现隐藏后，页面的位置还被控件占用，显示空白。

定义和用法

visibility 属性设置元素是否可见。

方法二：

document.getElementById("EleId").style.display="none";设置EleId标签隐藏
document.getElementById("EleId").style.display="inline";设置EleId标签显示

利用上述方法实现隐藏后，页面的位置不被占用。

定义和用法

display 属性设置元素如何显示。

网友（2）：

给你一段代码（手里只有jquery的，原生的我给你的这个例子你看明白了，原生的也没有问题le就）你参考下，核心就是给个变量，点击一次，等于另一个值，再点，值恢复默认，
var n=1;
$(".choose i").on("click",function(){

if(n==1){

$("#recommend").css("display","block")

$(this).css("background-position","-110px -49px");

n=2

}else{

$("#recommend").css("display","none")

$(this).css("background-position","-131px -49px");

n=1

}

})

网友（3）：

test

来，互相伤害

网友（4）：

给你一段代码（手里只有jquery的，原生的我给你的这个例子你看明白了，原生的也没有问题le就）你参考下，核心就是给个变量，点击一次，等于另一个值，再点，值恢复默认，
var n=1;
$(".choose i").on("click",function(){
if(n==1){
$("#recommend").css("display","block")
$(this).css("background-position","-110px -49px");
n=2;
}else{
$("#recommend").css("display","none")
$(this).css("background-position","-131px -49px");
n=1
}
})

网友（5）：

JS:document.getElementById("id1").style.display="none";
JQuery: $("#id1").hide();