javascript - 如何在css中获取窗口大小

Question

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

那么谁能告诉我是否可以让屏幕尺寸超过 500px 以及是否可以通过 css 更新属性绑定？

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

Answer 1

您不能使用 CSS 操作 DOM 元素属性，您需要使用 JavaScript！

Answer 2

如果我正确理解您的问题，我认为您可以通过 css 来完成。

如果您只想在屏幕低于 500 像素而不高于它时更改一些 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%;
            }
      }

Answer 3

您不能使用 CSS 更新 DOM 中的属性。您可以做的是编写一个调整大小事件来处理 div 大小的变化，并基于此更改属性。

所以基本上，使用事件监听器你可以做到这一点，但绝对不能使用 CSS :)。

你可以使用 javascript 或 jquery 来实现。

Answer 4

我想这可能是你想要的：

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

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

@media 标签通常用于响应式设计。使用@media 标签，你不需要 js 来监听调整窗口大小的动作。

Answer 5

使用高度和宽度 并获得高度和宽度，如下所示

$(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);