如何在CSS中获取窗口大小

时间:2013-10-07 12:52:50

标签: javascript jquery html css knockout.js

我有一个要求,我想让它与knockout.js一起使用。我有一个带属性绑定的div。当用户调整窗口大小时,我打算通过css设置属性绑定,我觉得应该更新视图模型。

所以有人能告诉我是否有可能让屏幕大小超过500px以及我是否可以通过css更新属性绑定?

如果在这方面需要进一步的信息,请告诉我。

5 个答案:

答案 0 :(得分:2)

你不能用CSS操纵DOM元素属性,你需要使用JavaScript!

答案 1 :(得分:0)

使用 height width  并得到如下所示的高度和宽度

$(window).height() ;

   $(window).width();

if( $(window).height() >=500)
{...// apply your code
}

并设置您的CSS,您也可以使用 css

$("#divid").css({"height":"in px","width":"in px"});

$("#divid").height(any number);
$("#divid").width(any number);

答案 2 :(得分:0)

您无法使用CSS更新DOM中的属性。你可以做的是编写一个resize事件来处理div大小的变化,并根据它改变属性。

所以基本上,对于事件监听器,你将能够做到这一点,但绝对不能用CSS:)。

您可以使用javascript或jquery来实现这一目标。

答案 3 :(得分:0)

我想这可能是你想要的:

@media (max-width: 500px) {
    #myDIv: { background-color: red; }
}

@media (min-width: 500px) {
    #myDIv: { background-color: blue; }
}

@media标签通常用于响应式设计。使用@media标记,您不需要js来监听调整大小窗口操作。

答案 4 :(得分:0)

如果我理解你的问题,我认为你可以通过css来实现。

如果您只是想在屏幕低于500px且不高于它时更改某些css值。这完全可以通过使用媒体查询来实现,这是一个简单的例子:

<强> HTML

将以下元数据放入页面头部(智能手机+平板电脑等)

   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />

<强> CSS

.your-class {
          display: block;
          background:green;
          height: 100%;
          width: 50%;
        }



    @media screen and (max-width: 500px) {
/* This is only added when the size of the window is under 500px */
    .your-class {
              display: block;
              background: blue;
              height: 100%;
              width: 100%;
            }
      }