Question

我试图这样做：

var width = window.innerWidth;
 if (width < 600) {
 document.getElementByClassName('2').setAttribute("style","clear: right;");
}

我的HTML在这里。我已经使用@media了我如何才能通过媒体查询为第二个div设置样式？

@media all and (min-width: 241px) {
 #blog-recent-block {
  width: 50%;
  float: left;
 }
}
@media all and (min-width: 600px) {
 #blog-recent-block {
  width: 25%;
  float: left;
 }
}
<div id="blog-recent">
 <div id="blog-recent-block" class="1"></div>
 <div id="blog-recent-block" class="2"></div>
 <div id="blog-recent-block" class="3"></div>
 <div id="blog-recent-block" class="4"></div>
</div>

Answer 1

使用类名称，您将获得元素集合而不是元素，因此您必须更改它：

getElementByClassName

到此：

getElementsByClassName

您需要影响收藏集中的元素：

var elements = document.getElementsByClassName('2');
for(var i = 0; i < elements.length; i++)
{
    elements[i].setAttribute("style","clear: right;");
}

使用媒体查询：

@media only screen and (max-width: 600px) {
   .2{
       width: 25%;
       float: left;
     }
}

请记住＆＃34; 2＆＃34;不是真正的类名，你需要把它改成像＃34; div2＆＃34;

如何根据window.innerWidth设置元素样式

1 个答案: