如何在css中获取窗口大小

Question

I have a requirement which I want to make it to work with knockout.js. I have a div with attribute binding. when the user resizes the window, I am planning to set the attribute binding through css which I feel should update the view model.

so can anyone tell me whether it is possible to get the screen size more than 500px and whether I can update the attribute binding through css?

Please let me know if any further information is required on this regard.

Answer 1

您无法使用CSS操作DOM元素属性，您将需要使用JavaScript！

Answer 2

use height and width and get height and width like below

$(window).height() ;

or

   $(window).width();

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

and set your css you can also use css

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

or

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

Answer 3

you cannot update an Attribute in DOM with CSS. what you can do is write a resize event to handle the change in size of the div and have the attribute changed based on that.

So basically, with event listeners you will be able to do that but definitely not with CSS :).

you can use javascript or jquery to achieve that.

Answer 4

I guess this could be what you want:

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

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

@media tag usually been used in responsive design. With the @media tag, you don't need js to listen to resize window action.

Answer 5

If I understand correctly your question, I think you can do it by css.

If you just want to change some css value when you screen is under 500px and not above it. This is totally possible by using media queries, here is a simple example:

HTML

put the following meta inside your page head (smartphones+tablets etc)

   <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%;
            }
      }