Как изменить css отображать нет или заблокировать свойство с помощью Jquery?

292

Как изменить css-отображение none или заблокировать свойство с помощью JQuery?

Теги:
jquery-selectors

9 ответов

620
Лучший ответ

Правильный способ сделать это - использовать show и hide:

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

Альтернативным способом является использование метода jQuery css:

$("#id").css("display", "none");
$("#id").css("display", "block");
  • 0
    @GenericTypeTea: #id используется для идентификаторов. А что, если я хочу использовать class ?
  • 23
    $(".class").css("display", "none");
Показать ещё 9 комментариев
90

Существует несколько способов достижения этого, каждый из которых имеет свою целевую цель.


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

  • некоторые элементы отображаются в виде встроенных, встроенных блоков или таблиц, в зависимости от Ta g N ame

$( '# ele_id') переключение();.

24

Если отображение div по умолчанию является блоком, вы можете просто использовать .show() и .hide() или даже проще, .toggle() для переключения между видимостью.

  • 0
    Правда, он установит отображение таким, каким оно было изначально, которое может быть блоком или чем-то другим.
4

для скрытия:

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

для показа:

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

Простой способ:

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

)}
2

Другой способ сделать это с помощью метода jQuery CSS:

$("#id").css({display: "none"});
$("#id").css({display: "block"});
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);
0

.hide() не работает в Chrome для меня Это работает для скидок:

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

используйте этот

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

или

$("#id").(":display").val("none");
  • 0
    у меня есть проблема, он не работает для меня :(. <style> #choosepath { display: none; } </style> <script> $(document).ready(function () { $('#btn_journey').click(function () { alert("button click"); $('#choosepath').css({"display":"normal"}); }); }); </script> </head> <body> <a href="#" class="btn btn-primary btn-lg" id="btn_journey">Start your journey</a> <div class="col-lg-3 col-md-6 mb-4" id="choosepath"> </div> </body></html>

Ещё вопросы

Сообщество Overcoder
Наверх
Меню