如何使用jQuery改变CSS的显示为零或块属性?
正确的方法是使用 show
和 hide
:
$('#id').hide();
$('#id').show();
另一种方法是使用jQuery css 的方法。
$("#id").css("display", "none");
$("#id").css("display", "block");
有几种方法可以达到这个目的,每种方法都有自己的预期目的。
1.) 要使用 直列 而简单地给一个元素分配一个要做的事情列表
$('#ele_id').css('display', 'block').animate(....
$('#ele_id').css('display', 'none').animate(....
2.) 设置多个CSS属性时使用
$('#ele_id').css({
display: 'none'
height: 100px,
width: 100px
});
$('#ele_id').css({
display: 'block'
height: 100px,
width: 100px
});
3.) 要动态调用命令
$('#ele_id').show();
$('#ele_id').hide();
4.) 如果是div,要在block和none之间动态切换。
$('#ele_id').toggle()。
如果div的显示是默认的块,你可以直接使用 .show()
和 .hide()
,甚至更简单。.toggle()
来切换可见性。
用于隐藏。
$("#id").css("display", "none");
为显示。
$("#id").css("display", "");
其他方式使用jQuery的CSS方法来实现。
$("#id").css({display: "none"});
$("#id").css({display: "block"});
简单的方法。
function displayChange(){
$(content_id).click(function(){
$(elem_id).toggle();}
)}
(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);
如果你想隐藏和显示一个元素,取决于它是否已经可见,你可以使用toggle来代替。.hide()
和 .show()
$('elem').toggle();
对我来说,.hide()在Chrome中不起作用。
这对隐藏是有效的。
var pctDOM = jQuery("#vr-preview-progress-content")[0];
pctDOM.hidden = true;
在我的例子中,我是根据输入元素是否为空来显示隐藏元素的,所以当隐藏元素时,隐藏元素后面的元素被重新定位,占据了它的空间,这就需要对这样一个元素的元素进行浮动:左。即使是使用dependOn这样的插件,也有必要使用float。
使用这个。
$("#id").(":display").val("block");
或者:
$("#id").(":display").val("none");
用这个:
$(#id/.class).show()
$(#id/.class).hide()
这个是最好的方法。