Как изменить css-отображение none или заблокировать свойство с помощью JQuery?
Правильный способ сделать это - использовать show
и hide
:
$('#id').hide();
$('#id').show();
Альтернативным способом является использование метода jQuery css:
$("#id").css("display", "none");
$("#id").css("display", "block");
Существует несколько способов достижения этого, каждый из которых имеет свою целевую цель.
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
$( '# ele_id') переключение();.
Если отображение div по умолчанию является блоком, вы можете просто использовать .show()
и .hide()
или даже проще, .toggle()
для переключения между видимостью.
для скрытия:
$("#id").css("display", "none");
для показа:
$("#id").css("display", "");
Простой способ:
function displayChange(){
$(content_id).click(function(){
$(elem_id).toggle();}
)}
Другой способ сделать это с помощью метода jQuery CSS:
$("#id").css({display: "none"});
$("#id").css({display: "block"});
(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);
.hide() не работает в Chrome для меня Это работает для скидок:
var pctDOM = jQuery("#vr-preview-progress-content")[0];
pctDOM.hidden = true;
используйте этот
$("#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>
#id
используется для идентификаторов. А что, если я хочу использоватьclass
?$(".class").css("display", "none");