Jak mogę zmienić wyświetlanie CSS lub zablokować właściwość za pomocą jQuery?

429

Jak mogę zmienić wyświetlanie CSS lub zablokować właściwość za pomocą jQuery?

DEVOPS
źródło

Odpowiedzi:

923

Prawidłowym sposobem na to jest użycie showi hide:

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

Alternatywnym sposobem jest użycie metody css jQuery :

$("#id").css("display", "none");
$("#id").css("display", "block");
djdd87
źródło
@GenericTypeTea: #idużywane dla identyfikatorów, a jeśli chcę użyć class?
AabinGunz
26
$(".class").css("display", "none");
djdd87
8
Próbowałem użyć $('#id').css('display', 'none');, ale to nie działało. Jednak korzystanie $('#id').css('color', 'red');działa. Nie jestem jednak pewien, dlaczego. Czy ktoś ma jakieś pomysły? Z góry dziękuję.
David
5
Warto również uwzględnić różnicę między $ („# id”). Hide () a $ („# id”). Css („display”, „none”) w tej odpowiedzi.
ManirajSS
1
Istnieje różnica między dwoma, w których poprzednia funkcja ukrywa tylko tekst i nie zwalnia miejsca zajmowanego przez element, podczas gdy drugie ukrywa treść i zwalnia miejsce zajmowane przez element kokpitu
Dila Gurung
110

Istnieje kilka sposobów osiągnięcia tego celu, każdy z własnym przeznaczeniem.


1. ) Aby użyć inline , po prostu przypisując elementowi listę rzeczy do zrobienia

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

2. ) Do użycia podczas ustawiania wielu właściwości CSS

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

3. ) Aby dynamicznie wywoływać polecenie

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

4. ) Aby dynamicznie przełączać się między blokiem a brakiem, jeśli jest to div

  • Niektóre elementy są wyświetlane jako wbudowane w rolkach bloku lub stole, w zależności od Ta g N ame

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

SpYk3HH
źródło
27

Jeśli wyświetlacz div blok jest domyślnie, można po prostu użyć .show()i .hide()czy nawet prostsze, .toggle()aby przełączać się między widoczności.

reko_t
źródło
To prawda, że ​​ustawia wyświetlanie na cokolwiek było początkowo, co może być blokiem lub czymś innym.
danielgwood
9

Do ukrycia:

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

Na pokaz:

$("#id").css("display", "");
Phanikumar Jatavallabhula
źródło
6

Innym sposobem na to jest użycie metody jQuery CSS:

$("#id").css({display: "none"});
$("#id").css({display: "block"});
Miguel
źródło
5

Prosta droga:

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

)}
użytkownik3726824
źródło
Wytłumaczenie byłoby w porządku.
Peter Mortensen
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);
Pham
źródło
Wytłumaczenie byłoby w porządku.
Peter Mortensen
2

Jeśli chcesz ukryć i pokazać element, w zależności od tego, czy jest już widoczny, czy nie, możesz użyć przełącznika zamiast .hide()i.show()

$('elem').toggle();
Vladimir verleg
źródło
1

.hide () nie działa dla mnie w Chrome.

Działa to w celu ukrycia:

var pctDOM = jQuery("#vr-preview-progress-content")[0];
pctDOM.hidden = true;
jimver04
źródło
0

W moim przypadku pokazywałem / ukrywałem elementy formularza w zależności od tego, czy element wejściowy był pusty, czy nie, tak więc podczas ukrywania elementów element za ukrytymi był zmieniany, zajmując jego przestrzeń, konieczne było wykonanie pływaka: left elementu takiego elementu. Nawet przy użyciu wtyczki, w zależności od tego, konieczne było użycie pływaka.

użytkownik2341112
źródło
0

Użyj tego:

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

Lub:

$("#id").(":display").val("none");
Trikaldarshi
źródło
mam problem, że nie działa dla mnie :(.<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>
jaibalaji
0

Posługiwać się:

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

To jest najlepszy sposób.

Saeed Ahmed
źródło