当前位置： 文江博客 话题详情

如何使用 jQuery 更改 CSS 不显示或阻止属性？

发布于 2024-09-16 08:58:18 字数 35 浏览 8 评论 0 原文

如何使用 jQuery 更改 CSS 不显示或阻止属性？

原文

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

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（15）

薄情伤 2024-09-23 08:58:18

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

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

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

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

The correct way to do this is to use show and hide:

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

An alternate way is to use the jQuery css method:

$("#id").css("display", "none");
$("#id").css("display", "block");
回复 原文
无人问我粥可暖 2024-09-23 08:58:18

有多种方法可以实现此目的，每种方法都有其各自的预期目的。

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

  • 一些元素显示为内联，内联块，或表，取决于 Tag N同名

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

There are several ways to accomplish this, each with its own intended purpose.

1.) To use inline while simply assigning an element a list of things to do

$('#ele_id').css('display', 'block').animate(....
$('#ele_id').css('display', 'none').animate(....

2.) To use while setting multiple CSS properties

$('#ele_id').css({
    display: 'none'
    height: 100px,
    width: 100px
});
$('#ele_id').css({
    display: 'block'
    height: 100px,
    width: 100px
});

3.) To dynamically call on command

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

4.) To dynamically toggle between block and none, if it's a div

  • some elements are displayed as inline, inline-block, or table, depending on the Tag Name

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

回复 原文
瘫痪情歌 2024-09-23 08:58:18

如果div的显示默认是block的，你可以使用.show()和.hide()，甚至更简单，.toggle() 在可见性之间切换。

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.

回复 原文
哥，最终变帅啦 2024-09-23 08:58:18

用于隐藏：

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

用于显示：

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

For hide:

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

For show:

$("#id").css("display", "");
回复 原文
厌味 2024-09-23 08:58:18

在 javascript:

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

和 jquery: 中

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

，您可以使用：

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

In javascript:

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

and in jquery:

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

and you can use:

$('#myDIV').hide();
$('#myDIV').show();
回复 原文
清浅ˋ旧时光 2024-09-23 08:58:18

简单的方法：

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

)}

Simple way:

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

)}
回复 原文
兰花执着 2024-09-23 08:58:18

使用 jQuery CSS 方法的其他方法：

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

Other way to do it using jQuery CSS method:

$("#id").css({display: "none"});
$("#id").css({display: "block"});
回复 原文
阳光下的泡沫是彩色的 2024-09-23 08:58:18

如果您想隐藏和显示一个元素，取决于它是否已经可见，您可以使用
切换而不是 .hide() 和 .show()

$('elem').toggle();

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

$('elem').toggle();
回复 原文
彼岸花ソ最美的依靠 2024-09-23 08:58:18

$("#id").css("显示", "无");

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>

$("#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>

回复 原文
囚你心 2024-09-23 08:58:18 
(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);

(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);
回复 原文
死开点丶别碍眼 2024-09-23 08:58:18

.hide() 在 Chrome 中对我不起作用。

这适用于隐藏：

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

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

This works for hiding:

var pctDOM = jQuery("#vr-preview-progress-content")[0];
pctDOM.hidden = true;
回复 原文
夏末染殇 2024-09-23 08:58:18

就我而言，我正在根据输入元素是否为空来显示/隐藏表单的元素，因此，当隐藏元素时，隐藏元素后面的元素会重新定位，占据其空间，因此有必要执行 float: left这种元素的元素。即使使用插件作为dependsOn，也有必要使用float。

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.

回复 原文
狠疯拽 2024-09-23 08:58:18

使用这个：

$("#id").(":display").val("block");

或者：

$("#id").(":display").val("none");

Use this:

$("#id").(":display").val("block");

Or:

$("#id").(":display").val("none");
回复 原文
徒留西风 2024-09-23 08:58:18

使用：

$(#id/.class).show()
$(#id/.class).hide()

这是最好的方法。

Use:

$(#id/.class).show()
$(#id/.class).hide()

This one is the best way.

回复 原文
画离情绘悲伤 2024-09-23 08:58:18

您可以通过按钮

you can do it by button

<button onclick"document.getElementById('elementid').style.display = 'none or block';">

回复 原文
~没有更多了~

关于作者

假装爱人

暂无简介

0 文章
0 评论
23 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

淡笑忘祈一世凡恋

文章 0 评论 0

我们的影子

文章 0 评论 0

素年丶

文章 0 评论 0

南笙

文章 0 评论 0

18215568913

文章 0 评论 0

qq_xk7Ean

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文