blocks|key|944188|text|正确的方法是使用show和hide|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|944189|$('#id').hide();
$('#id').show();|code-block|syntax|javascript|944190|另一种方法是使用jQuery+css方法：|944191|$("#id").css("display",+"none");
$("#id").css("display",+"block");|944192|entityMap|0|LINK|mutability|MUTABLE|url|http://api.jquery.com/css/#css2^0|8|4|D|4|0|0|F|3|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@$9|X|A|Y|B|C]|$9|Z|A|10|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|11|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|12|8|@]|D|@$9|13|A|14|1|15]]|E|$]]|$1|M|3|N|5|H|7|16|8|@]|D|@]|E|$I|J]]|$1|O|3|-4|5|6|7|17|8|@]|D|@]|E|$]]]|P|$Q|$5|R|S|T|E|$U|V]]]]

The correct way to do this is to use <code>show</code> and <code>hide</code>:

<pre><code>$('#id').hide();
$('#id').show();
</code></pre>

An alternate way is to use the jQuery <a href="http://api.jquery.com/css/#css2" rel="noreferrer">css</a> method:

<pre><code>$("#id").css("display", "none");
$("#id").css("display", "block");
</code></pre>

blocks|key|1158384|text|如果默认情况下div的显示是阻塞的，那么您可以只使用.show()和.hide()，或者甚至更简单的.toggle()来在可见性之间切换。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1158385|entityMap^0|Q|7|Y|7|1E|9|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]|$9|K|A|L|B|C]|$9|M|A|N|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|O|8|@]|D|@]|E|$]]]|G|$]]

If the display of the div is block by default, you can just use <code>.show()</code> and <code>.hide()</code>, or even simpler, <code>.toggle()</code> to toggle between visibility.

blocks|key|1158499|text|对于hide：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1158500|$("#id").css("display",+"none");|code-block|syntax|javascript|1158501|对于show：|1158502|$("#id").css("display",+"");|1158503|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

For hide:

<pre><code>$("#id").css("display", "none");
</code></pre>

For show:

<pre><code>$("#id").css("display", "");
</code></pre>

blocks|key|944356|text|使用jQuery+CSS方法的另一种方法：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|944357|$("#id").css({display:+"none"});
$("#id").css({display:+"block"});|code-block|syntax|javascript|944358|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Other way to do it using jQuery CSS method:

<pre><code>$("#id").css({display: "none"});
$("#id").css({display: "block"});
</code></pre>

blocks|key|944396|text|简单的方法：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|944397|function+displayChange(){
$(content_id).click(function(){
++$(elem_id).toggle();}

)}|code-block|syntax|javascript|944398|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Simple way:

<pre><code>function displayChange(){
$(content_id).click(function(){
 $(elem_id).toggle();}

)}
</code></pre>

blocks|key|944526|text|如果要根据元素是否已可见来隐藏和显示元素，可以使用toggle而不是.hide()和.show()|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|944527|$('elem').toggle();|code-block|syntax|javascript|944528|entityMap^0|Y|7|16|7|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]|$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|R|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|S|8|@]|D|@]|E|$]]]|L|$]]

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 <code>.hide()</code> and <code>.show()</code>

<pre><code>$('elem').toggle();
</code></pre>

blocks|key|944377|text|(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);|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|944378|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>(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);
</code></pre>

blocks|key|1158532|text|对于我来说，.hide()在Chrome中不起作用。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1158533|这适用于隐藏：|1158534|var+pctDOM+=+jQuery("#vr-preview-progress-content")[0];
pctDOM.hidden+=+true;|code-block|syntax|javascript|1158535|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

.hide() does not work in Chrome for me.

This works for hiding:

<pre><code>var pctDOM = jQuery("#vr-preview-progress-content")[0];
pctDOM.hidden = true;
</code></pre>

blocks|key|944673|text|在javascript中：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|944674|document.getElementById("myDIV").style.display+=+"none";|code-block|syntax|javascript|944675|在jquery中：|944676|$("#myDIV").css({display:+"none"});
$("#myDIV").css({display:+"block"});|944677|944678|您可以使用：|944679|$('#myDIV').hide();
$('#myDIV').show();|944680|entityMap^0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|S|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|T|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|U|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|V|8|@]|9|@]|A|$]]|$1|L|3|M|5|6|7|W|8|@]|9|@]|A|$]]|$1|N|3|O|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|P|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|Q|$]]

In javascript:
<pre><code>document.getElementById(&quot;myDIV&quot;).style.display = &quot;none&quot;;
</code></pre>
and in jquery:
<pre><code>$(&quot;#myDIV&quot;).css({display: &quot;none&quot;});
$(&quot;#myDIV&quot;).css({display: &quot;block&quot;});
</code></pre>
<hr />
and you can use:
<pre><code>$('#myDIV').hide();
$('#myDIV').show();
</code></pre>

blocks|key|944371|text|使用以下命令：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|944372|$("#id").(":display").val("block");|code-block|syntax|javascript|944373|或者：|944374|$("#id").(":display").val("none");|944375|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

Use this:

<pre><code>$("#id").(":display").val("block");
</code></pre>

Or:

<pre><code>$("#id").(":display").val("none");
</code></pre>

blocks|key|1158645|text|在我的例子中，我是根据输入元素是否为空来显示/隐藏表单的元素，因此当隐藏元素时，隐藏元素之后的元素会重新定位以占据其空间，因此有必要在此类元素的元素的左侧进行浮动:+left。即使使用插件作为dependsOn，使用float也是必要的。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1158646|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

In my case I was doing show / hide elements of a form according to whether an input element was empty or not, so that when hiding the elements the element following the hidden ones was repositioned occupying its space it was necessary to do a float: left of the element of such an element. Even using a plugin as dependsOn it was necessary to use float.

blocks|key|944608|text|使用：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|944609|$(#id/.class).show()
$(#id/.class).hide()|code-block|syntax|javascript|944610|这是最好的方法。|944611|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

Use:

<pre><code>$(#id/.class).show()
$(#id/.class).hide()
</code></pre>

This one is the best way.

blocks|key|1158771|text|你可以通过按钮来完成|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1158772|<button+onclick"document.getElementById('elementid').style.display+=+'none+or+block';">|offset|length|style|CODE|1158773|entityMap^0|0|0|2F|0^^$0|@$1|2|3|4|5|6|7|J|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|K|8|@$D|L|E|M|F|G]]|9|@]|A|$]]|$1|H|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|I|$]]

you can do it by button
<code>&lt;button onclick&quot;document.getElementById('elementid').style.display = 'none or block';&quot;&gt;</code>

How can I change CSS display none or block property using jQuery?

How can I change CSS display none or block property using jQuery?

jQuery

如何使用jQuery更改CSS display none或block属性？

问如何使用jQuery更改CSS display none或block属性？
EN

回答 13

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用jQuery更改CSS display none或block属性？EN

回答 13

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用jQuery更改CSS display none或block属性？
EN