Назначьте стиль для div с помощью jquery

Question

Я хотел бы назначить в div с именем bannerdiv max-width и max-weight, которые совпадают с разрешением браузера.

Я уже собрал следующие данные:

$(window).width()
$(window).height()

Как мне присвоить эти значения в стиле bannerdiv?

Answer 1

Добро пожаловать в StackOverflow.

Вы можете использовать приведенный ниже фрагмент и в своем коде.

Сохранение высоты и ширины в 2 переменных:

var height = $(window).height();
var width = $(window).width();

Затем присвойте значение в контейнер

$("#bannerdiv").attr('style','height:'+height+'px;width:'+width+'px');

Событие "attr" добавит атрибут "style" в элемент.

Answer 2

Вы можете использовать «vw», который является шириной области просмотра, и «vh», которая является высотой области просмотра, каждое число представляет 1% ширины области просмотра (vw) или высоты области просмотра (vh), поэтому «50vh» составляет 50% высоты. окна браузера или 18vw составляет 18% от ширины браузера. https://www.w3schools.com/cssref/css_units.asp

И Мамун прав, вы можете применить это напрямую, используя jQuery .css (), но используя vw и vh вам не нужно фиксировать высоту и ширину окна.

Итак, если bannerdiv - это класс

$('.bannerdiv').css({'max-height': '100vh', 'max-width': '100vw'});

если это ID

$('#bannerdiv').css({'max-height': '100vh', 'max-width': '100vw'});

Answer 3

<div id="bannerdiv">YourDiv</div>

$('#YourDivID').css({
'max-width' : 'YourWidthForDiv',
 'max-height' : 'YourHeightForDiv' 
});

Вы можете обратиться Метод css () Демо Для получения дополнительной информации

Answer 4

Чтобы установить стиль с помощью jQuery, используйте .css() следующим образом:

var height = $(window).height();
var width = $(window).width();
$("#bannerdiv").css('height', height);
$("#bannerdiv").css('width', width);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="bannerdiv">Test</div>

ИЛИ: В одну строку

$("#bannerdiv").css('height', height).css('width', width);

ИЛИ: Еще лучше синициализатор свойства

$("#bannerdiv").css({ 'width' : width, 'height' : height });