使用Jquery更改div宽度

为了根据窗口大小更改Div宽度，我在谷歌上搜索并尝试使用stackoverflow帖子中的以下JQuery脚本组合答案：

JQuery脚本：

<script>  
function checkWindowSize() {  
    if ($(window).width() > 1800) {  
        $('#divwidth').addClass('large');  
    }  
    else {  
        $('#divwidth').removeClass('large');  
    }  
}  
$(window).resize(checkWindowSize);     
</script>  

下面是我使用类的html：

<div style="text-align: left; margin-left:auto;margin-right:auto;  overflow-x:auto;" ID="divwidth">

<!-- my gridview here -->
</div>  

---

设置Div宽度似乎不起作用。更改脚本类型text/Javascript也没有帮助。

我认为您不需要jQuery来实现这一点。您可以像在这个JSFIDLE中一样将宽度设置为百分比

或者使用类似于此JSFIDLE中的媒体查询

---

拖动并调整浏览器大小以查看更改

如果CSS选择器有问题

你有这个：

.large #divwidth{  
    width: 2200px;
} 

您的意思是希望id为divwidth的元素位于类为large的元素中

你需要这个：

#divwidth.large{  
    width: 2200px;
} 

---

通过这种方式，您表示希望元素的id为divwidth，而类为large

您在@kpucha的anwer中遇到的问题是您错误地实现了他的建议。在你的CSS中，仍然有一个空格“”改变了CSS的含义。 您的代码是：

#divwidth .large{  
    width: 2200px;
} 

应在哪里：

#divwidth.large{  
    width: 2200px;
} 

不同之处在于，您的规则适用于具有大类的divwidth的后代。相反，它应该应用于同样具有classlarge的divwidth元素

但是，最好的方法是CSS媒体查询，如下所示：

---

当视口小于1800px时，这将导致div的宽度为1200px。

我认为这是另一个问题。@Draco18s thx我添加了css标记，我还链接了该页面，因为该页面可能会帮助您自己解决问题。divwidth比.large更具体，因此.large被忽略。您可以使用来处理屏幕大小。在设计响应性网站时，此标签非常有用。可与100%或5em等相对测量相结合，以控制不同尺寸设备上的体验。当我将宽度从固定数字更改为%时，它会扩展，因为我的gridview比页面的宽度长。像秒示例中那样的css媒体查询如何？在我尝试使用代码时，css媒体查询不起作用。然而，在我尝试了Ivan的代码之后，它就工作了，然后我意识到它也适用于你的第二个答案。希望我能接受这两个答案我更新了我的代码，也更新了这里的帖子，没有任何更改。好吧，这里它正在工作，也许你没有触发事件，请参阅代码中的注释。谢谢Kpucha，我检查了，你是对的，函数没有触发。。。。我想它应该触发的时刻窗口网页是调整大小？CSS媒体查询解决了这个问题，我很好奇为什么我的jscript没有触发事件。当窗口大小改变时，会触发调整大小。如果加载js但不更改窗口的大小，请不要识别和调整大小的事件，也不要触发该函数。有些事情阻止了我调用该函数。窗口大小更改时，不会运行简单警报。既然你确认我没有看到空白，我会调查的-谢谢！使用Css媒体查询可以很快解决这个问题

#divwidth.large{  
    width: 2200px;
} 

#divwidth .large{  
    width: 2200px;
} 

#divwidth.large{  
    width: 2200px;
} 

#divwidth {
    width: 1200px;
}
@media (min-width:1800px) {
    #divwidth {
        width: 2200px;
    }
}