Como posso alterar a exibição de CSS ou bloquear a propriedade usando o jQuery?
jquery
jquery-selectors
DEVOPS
fonte
fonte
#id
usado para IDs, e se eu quiser usarclass
?$(".class").css("display", "none");
$('#id').css('display', 'none');
, mas não funcionou. No entanto, usar$('#id').css('color', 'red');
funciona. Não sei por que, no entanto. Alguém tem alguma idéia? Desde já, obrigado.Existem várias maneiras de conseguir isso, cada uma com seu próprio objetivo.
1. ) Para usar inline enquanto simplesmente atribui a um elemento uma lista de coisas a fazer
2. ) Para usar ao definir várias propriedades CSS
3. ) Para chamar dinamicamente o comando
4. ) Alternar dinamicamente entre bloco e nenhum, se for um div
fonte
Se a exibição da div estiver bloqueada por padrão, você pode simplesmente usar
.show()
e.hide()
, ou ainda mais simples,.toggle()
alternar entre a visibilidade.fonte
Para ocultar:
Para mostrar:
fonte
Outra maneira de fazer isso usando o método CSS jQuery:
fonte
Maneira simples:
fonte
fonte
Caso deseje ocultar e mostrar um elemento, dependendo se ele já está visível ou não, você pode usar alternar em vez de
.hide()
e.show()
fonte
.hide () não funciona no Chrome para mim.
Isso funciona para ocultar:
fonte
No meu caso, eu estava exibindo / ocultando elementos de um formulário, dependendo se um elemento de entrada estava vazio ou não, de modo que, ao ocultar os elementos, o elemento após os ocultos fosse reposicionado ocupando seu espaço, era necessário fazer um float: left do elemento desse elemento. Mesmo usando um plugin como DependOn era necessário usar float.
fonte
Usa isto:
Ou:
fonte
<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>
Usar:
Este é o melhor caminho.
fonte