How to change css display none or block property using Jquery?
如何使用Jquery更改css显示无或块属性?
10 个解决方案
#1
680
The correct way to do this is to use show
and hide
:
正确的方法是使用show和hide:
$('#id').hide();
$('#id').show();
An alternate way is to use the jQuery css method:
另一种方法是使用jQuery css方法:
$("#id").css("display", "none");
$("#id").css("display", "block");
#2
91
There are several ways to accomplish this, each with it's own intended purpose.
有几种方法可以达到这个目的,每一种都有自己的目的。
1.) To use inline while simply assigning an element a list of things to do
1)。在简单地为元素分配要做的事情列表时使用内联
$('#ele_id').css('display', 'block').animate(....
$('#ele_id').css('display', 'none').animate(....
2.) To use while setting multiple CSS Properties
2)。在设置多个CSS属性时使用
$('#ele_id').css({
display: 'none'
height: 100px,
width: 100px
});
$('#ele_id').css({
display: 'block'
height: 100px,
width: 100px
});
3.) To dynamically call on command
3)。动态调用命令
$('#ele_id').show();
$('#ele_id').hide();
4.) To dynamically toggle between block and none, if it's a div
4)。如果是div,则动态地在block和none之间切换
- some elements are displayed as inline, inline-block, or table, depending on the Tag Name
- 根据标记名,有些元素显示为内联、内联块或表
$('#ele_id').toggle();
$(' # ele_id ').toggle();
#3
25
If the display of the div is block by default, you can just use .show()
and .hide()
, or even simpler, .toggle()
to toggle between visibility.
如果div的显示默认为块,您可以使用.show()和.hide(),或者更简单的.toggle()来切换可见性。
#4
5
Simple way:
简单的方法:
function displayChange(){
$(content_id).click(function(){
$(elem_id).toggle();}
)}
#5
5
for hide:
隐藏:
$("#id").css("display", "none");
for show:
显示:
$("#id").css("display", "");
#6
3
Other way to do it using jQuery CSS method:
用jQuery CSS方法实现:
$("#id").css({display: "none"});
$("#id").css({display: "block"});
#7
1
(function($){
$.fn.displayChange = function(fn){
$this = $(this);
var state = {};
state.old = $this.css('display');
var intervalID = setInterval(function(){
if( $this.css('display') != state.old ){
state.change = $this.css('display');
fn(state);
state.old = $this.css('display');
}
}, 100);
}
$(function(){
var tag = $('#content');
tag.displayChange(function(obj){
console.log(obj);
});
})
})(jQuery);
#8
1
In case you want to hide and show an element depending on whether it is already visible or not you can use toggle instead: of .hide() and .show()
如果您想隐藏和显示一个元素,取决于它是否已经可见,或者您可以使用toggle来代替:.hide()和.show()
$('elem').toggle();
$(' elem ').toggle();
#9
0
use this
使用这个
$("#id").(":display").val("block");
or
或
$("#id").(":display").val("none");
#10
0
.hide() does not work in Chrome for me This works for hidding:
.hide()对我来说在Chrome中不起作用。
var pctDOM = jQuery("#vr-preview-progress-content")[0];
pctDOM.hidden = true;
#1
680
The correct way to do this is to use show
and hide
:
正确的方法是使用show和hide:
$('#id').hide();
$('#id').show();
An alternate way is to use the jQuery css method:
另一种方法是使用jQuery css方法:
$("#id").css("display", "none");
$("#id").css("display", "block");
#2
91
There are several ways to accomplish this, each with it's own intended purpose.
有几种方法可以达到这个目的,每一种都有自己的目的。
1.) To use inline while simply assigning an element a list of things to do
1)。在简单地为元素分配要做的事情列表时使用内联
$('#ele_id').css('display', 'block').animate(....
$('#ele_id').css('display', 'none').animate(....
2.) To use while setting multiple CSS Properties
2)。在设置多个CSS属性时使用
$('#ele_id').css({
display: 'none'
height: 100px,
width: 100px
});
$('#ele_id').css({
display: 'block'
height: 100px,
width: 100px
});
3.) To dynamically call on command
3)。动态调用命令
$('#ele_id').show();
$('#ele_id').hide();
4.) To dynamically toggle between block and none, if it's a div
4)。如果是div,则动态地在block和none之间切换
- some elements are displayed as inline, inline-block, or table, depending on the Tag Name
- 根据标记名,有些元素显示为内联、内联块或表
$('#ele_id').toggle();
$(' # ele_id ').toggle();
#3
25
If the display of the div is block by default, you can just use .show()
and .hide()
, or even simpler, .toggle()
to toggle between visibility.
如果div的显示默认为块,您可以使用.show()和.hide(),或者更简单的.toggle()来切换可见性。
#4
5
Simple way:
简单的方法:
function displayChange(){
$(content_id).click(function(){
$(elem_id).toggle();}
)}
#5
5
for hide:
隐藏:
$("#id").css("display", "none");
for show:
显示:
$("#id").css("display", "");
#6
3
Other way to do it using jQuery CSS method:
用jQuery CSS方法实现:
$("#id").css({display: "none"});
$("#id").css({display: "block"});
#7
1
(function($){
$.fn.displayChange = function(fn){
$this = $(this);
var state = {};
state.old = $this.css('display');
var intervalID = setInterval(function(){
if( $this.css('display') != state.old ){
state.change = $this.css('display');
fn(state);
state.old = $this.css('display');
}
}, 100);
}
$(function(){
var tag = $('#content');
tag.displayChange(function(obj){
console.log(obj);
});
})
})(jQuery);
#8
1
In case you want to hide and show an element depending on whether it is already visible or not you can use toggle instead: of .hide() and .show()
如果您想隐藏和显示一个元素,取决于它是否已经可见,或者您可以使用toggle来代替:.hide()和.show()
$('elem').toggle();
$(' elem ').toggle();
#9
0
use this
使用这个
$("#id").(":display").val("block");
or
或
$("#id").(":display").val("none");
#10
0
.hide() does not work in Chrome for me This works for hidding:
.hide()对我来说在Chrome中不起作用。
var pctDOM = jQuery("#vr-preview-progress-content")[0];
pctDOM.hidden = true;