Получить ширину и высоту окна экрана и высоту div jquery
Говоря простым языком, это функциональность jQuery, которую я ищу:
Мне нужно получить ширину и высоту окна браузера, а затем получить высоту .banner
div (высота автоматическая). Если высота .banner
div больше, чем высота окна браузера .title
Div и .social
Div для тела в противном случае отображать .title
div и.social div внутри .banner
дела.
Как мне тогда стилизовать два div'а соответственно (.title
а также .social
)?
РЕДАКТИРОВАТЬ: Это мой код загрузки страницы в HTML:
<div class="banner">
<div class="title">
<!--to be positioned 40px from the left-->
</div>
<div class="social">
<!--to be positioned 40px from the right-->
</div>
<img src="URL"/> <!-- Image determines height of DIV uses max-width -->
</div>
3 ответа
Решение
Вы можете сделать что-то вроде ниже:
var windowHeight = $(window).height(); //Gives you the browser viewport height
var bannerHeight = $(".banner").height();
if (bannerHeight > windowHeight) {
$("body").append($('.title'));
$("body").append($('.social'));
//Then you can style them using jQuery .css
//Example
$('.title').css('color', 'red');
}
else {
//Display .title and .social in your .banner div
}
- jQuery. информация о высоте: http://api.jquery.com/height/
- jQuery.css информация: http://api.jquery.com/css/
Используйте эти функции:
$(window).height();
$(window).width();
$('.banner').width();
$('.banner').height();
$("#tostyle").addClass('someclass');
так далее
Динамически обновлять элементы:
$(function(){
var divheight = $('.banner').height(); // div current height
// handle the resize event
$(window).resize(function(){
if($(this).height() < divheight) {
$('.title').appendTo($('body'));
$('.social').appendTo($('body'));
$('.banner').hide();
} else {
$('.title').appendTo($('.banner'));
$('.social').appendTo($('.banner'));
$('.banner').show();
}
});
});
код намеренно не упрощен для лучшей читаемости