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

Question

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

- DEVOPS

Answer 1

正确的做法是使用show和hide：

$('#id').hide();
$('#id').show();

另一种方法是使用jQuery的css方法：

$("#id").css("display", "none");
$("#id").css("display", "block");

- djdd87

---

将 $(".class").css("display", "none"); 翻译为：选择类名为“class”的元素，并将其 CSS display 属性设置为“none”。 - djdd87

我尝试使用 $('#id').css('display', 'none')，但它没有生效。然而，使用 $('#id').css('color', 'red') 是有效的。虽然我不确定原因，但是否有人有任何想法呢？先谢谢了。 - David

@David 我尝试了完全相同的代码 $('#id').css('display', 'none'); 并且它在我的电脑上正常工作，我不明白为什么它对你没有起作用。 - vishB

在这个答案中，还值得包括$('#id').hide()和$("#id").css("display", "none")之间的区别。 - ManirajSS

两者之间存在区别，前一个函数仅隐藏文本，不释放元素占用的空间，而后者隐藏内容并释放关联元素占用的空间。 - Dila Gurung

Answer 2

有几种方法可以实现这一点，每种方法都有其自己的目的。

---

1.) 使用inline，仅将一系列要执行的任务列表分配给一个元素

$('#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元素中切换显示和隐藏，请使用以下方法：

$('#ele_id').toggle();

某些元素的显示方式可能是 inline、inline-block 或 table，具体取决于标签名称。Tag Name

- SpYk3HH

Answer 3

如果 div 的默认显示方式为块级元素，您可以直接使用 .show() 和 .hide()，甚至更简单的是使用 .toggle() 在可见性之间进行切换。

- reko_t

---

True，它将设置显示为最初的状态，可能是块或其他不同的东西。 - danielgwood

Answer 4

隐藏内容：

$("#id").css("display", "none");

展示用途：

$("#id").css("display", "");

- Phanikumar Jatavallabhula

Answer 5

在 JavaScript 中：

document.getElementById("myDIV").style.display = "none";

并且在jQuery中：

$("#myDIV").css({display: "none"});
$("#myDIV").css({display: "block"});

---

您可以使用:

$('#myDIV').hide();
$('#myDIV').show();

- Mojtaba Nava

Answer 6

简单方法：

function displayChange(){
$(content_id).click(function(){
  $(elem_id).toggle();}

)}

- user3726824

---

需要解释一下。 - Peter Mortensen

Answer 7

如果您想根据元素是否已经可见来隐藏或显示它，您可以使用toggle代替.hide()和.show()。

$('elem').toggle();

- Mister Verleg

Answer 8

使用jQuery CSS方法的另一种方法：

$("#id").css({display: "none"});
$("#id").css({display: "block"});

- Miguel

Answer 9

$("#id").css("display", "none");

setTimeout(()=>{
  $("#id").css("display", "none");
}, 2000)
$("#id2").css("display", "none");

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='id'>Hello World!</div>
<div id='id2'>Hello World 2!</div>

- Sahil Thummar

Answer 10

(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);

- Pham

---

需要解释一下。 - Peter Mortensen