Как я могу изменить CSS не отображать или заблокировать свойство с помощью jQuery?


429

Как я могу изменить CSS не отображать или заблокировать свойство с помощью jQuery?

Ответы:


923

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

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

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

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

@ GenericTypeTea: #idиспользуется для идентификаторов, а что если я хочу использовать class?
AabinGunz

26
$(".class").css("display", "none");
djdd87

8
Я пытался использовать $('#id').css('display', 'none');, но это не сработало. Тем $('#id').css('color', 'red');не менее, использование работает. Я не уверен, почему, хотя. У кого-нибудь есть идеи? Заранее спасибо.
Дэвид

5
Также стоит включить в этот ответ разницу между $ ('# id'). Hide () и $ ("# id"). Css ("display", "none").
ManirajSS

1
Существует различие между двумя, где первая функция скрывает только текст и не освобождает пространство, занимаемое элементом, тогда как последние скрывают содержимое и освобождают пространство, занимаемое элементом cocern
Dila Gurung

110

Есть несколько способов сделать это, каждый со своей целью.


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

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

$ ( '# Ele_id') тумблер ().


27

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


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


6

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

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


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

Объяснение будет в порядке.
Питер Мортенсен

2

Если вы хотите скрыть и показать элемент, в зависимости от того, виден он или нет, вы можете использовать переключатель вместо .hide()и.show()

$('elem').toggle();

1

.hide () не работает в Chrome для меня.

Это работает для сокрытия:

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

0

В моем случае я делал показывать / скрывать элементы формы в зависимости от того, был ли элемент ввода пустым или нет, поэтому, когда скрывались элементы, элемент, следующий за скрытыми, был перемещен, занимая его пространство, было необходимо сделать float: left элемента такого элемента. Даже используя плагин в зависимости от того, нужно было использовать float.


0

Использовать этот:

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

Или:

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

У меня есть проблема, это не работает для меня :(.<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>
Джайбаладжи

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.