这是我试图添加类的div
<div id="sidebar" class="addthis_recommended_horizontal col-lg-4 col-md-4 col-sm-6 col-xs-12""></div>
这就是我使用的脚本
<script>window.onresize=function()
{var width=document.getElementById("#sidebar").clientWidth;
if(width<640) {document.getElementById("#sidebar").setAttribute("class",".sidebar");}
</script>
添加这个类后,这个CSS代码更改的宽度
.sidebar.at4-recommended-item{width:45%!important}
但是这个类没有被添加,我不知道为什么?
编辑我正在使用媒体查询。在这种情况下,两个类具有相同的名称。如果我更改其中一个,那么另一个也会更改,所以我正在动态添加一个类,并且我需要更改的是一个div,而不是整个窗口宽度。
为什么人们如此热衷于在这里对每个问题进行投票
由于在调整窗口大小时要更改元素的宽度,因此理想情况下应该使用CSS3的@media查询!
在您的情况下,@media查询将是:
<style>
@media (max-width: 640px){
#sidebar{
width: 45%;
}
}
</style>
仅仅为此目的编写Javascript是个坏主意。
了解更多信息:CSS@media-queries|MDN-
编辑:
如果您是动态添加类,只需在@media-query:中提及即可
<style>
@media (max-width: 640px){
.sidebar{
width: 45%;
}
}
</style>
保持简单。:)
通过document.getElementById
选择元素时不要使用#
。#
用于css/jQuery选择器,而不是纯JavaScript。并且您在窗口大小调整到640
以下时添加了一个类名,在640
以上调整时也应该考虑删除该类。
请尝试使用以下代码:
<script>
window.onresize=function() {
var sidebar = document.getElementById("sidebar");
var width = sidebar.clientWidth;
if(width<640) {
sidebar.className ="sidebar";
}
else{
sidebar.className = ""; //assuming this element doesn't have any other classes.
}
}
</script>
如果你想使用jQuery,那么
<script>
window.onresize=function() {
var sidebar = $("#sidebar");
var width = sidebar.width();
if(width<640) {
sidebar.addClass("sidebar");
}
else{
sidebar.removeClass("sidebar");
}
}
</script>