使用jQuery将样式分配给div

时间:2018-09-07 03:52:53

标签: javascript php jquery html css3

我想在名为bannerdiv的div上分配与浏览器分辨率一致的max-widthmax-weight

我已经捕获了以下数据:

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

如何以bannerdiv的样式分配这些值?

4 个答案:

答案 0 :(得分:1)

您可以使用“ vw”(视口宽度)和“ vh”(视口高度),每个数字代表视口宽度(vw)或视口高度(vh)的1%,因此“ 50vh”是视口高度的50%浏览器窗口或“ 18vw”的宽度是浏览器宽度的18%。 https://www.w3schools.com/cssref/css_units.asp

Mamun是正确的,您可以使用jQuery的.css()直接应用它,但是使用vw和vh不需要捕获窗口的高度和宽度。

所以,如果bannerdiv是一个类

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

如果是ID

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

答案 1 :(得分:0)

要使用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>

OR:(一行)

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

OR:使用属性初始化程序会更好

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

答案 2 :(得分:0)

 private flag: boolean;

 ngOnInit() {
        this.flag = true;
 }

 ngOnDestroy() {
        this.flag = false;
 }
 onTimeOut() {
        this.ApiCall().then(
        success => {
        if(success ['ok'] == 0){
            this.navCtrl.push(myPage);
        }
        },
        error => { console.log(error); });
    }
     setTimeout(() => {
     if(this.flag){
        this.onTimeOut();
     }
    }, 1000);
    }

您可以参考css() method Demo以获得更多信息

答案 3 :(得分:0)

欢迎使用StackOverflow。

您可以在代码段下方和代码中使用。

将高度和宽度存储在2个变量中:

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

然后将值分配到容器

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

“ attr”事件将在元素中附加“ style”属性。