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

429

jquery jquery-selectors DevOps
источник

923

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

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

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

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

djdd87
источник

@ 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') тумблер ().

SpYk3HH
источник

27

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

reko_t
источник

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

Даниэльвуд

9

Для скрытия:

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

Для видимости:

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

Фаникумар Джатаваллабхула
источник

6

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

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

Miguel
источник

5

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

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

)}

user3726824
источник

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

Питер Мортенсен

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;

jimver04
источник

0

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

user2341112
источник

0

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

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

Или:

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

Trikaldarshi
источник

У меня есть проблема, это не работает для меня :(.

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

Джайбаладжи

0

Использование:

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

Это лучший способ.

Саид Ахмед
источник

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

Ответы: