我有一个要求,我想让它与knockout.js一起使用。我有一个带属性绑定的div。当用户调整窗口大小时,我打算通过css设置属性绑定,我觉得应该更新视图模型。
所以有人能告诉我是否有可能让屏幕大小超过500px以及我是否可以通过css更新属性绑定?
如果在这方面需要进一步的信息,请告诉我。
答案 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%;
}
}