-1

I'm trying to do it this way:

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

My html here. I already use @media How i can set style only for second div by media queries? 

@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>
Eugene Moskvin
  • 19
  • 5
  • 2
    So? What's the problem? – Hedegare Oct 23 '17 at 16:03
  • 1
    Have you considered [media queries](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries)? – Jonathan Lonowski Oct 23 '17 at 16:04
  • @Jackowski not working – Eugene Moskvin Oct 23 '17 at 16:04
  • don't use javascript use [Media Queries in CSS](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries) – Liam Oct 23 '17 at 16:04
  • I think you'd better consider using [media queries](https://developer.mozilla.org/fr/docs/Web/CSS/Requ%C3%AAtes_m%C3%A9dia/Utiliser_les_Media_queries) for this kind of stuff. – 3Dos Oct 23 '17 at 16:05
  • 3
    @EugeneMoskvin "Not working" in what way? What exactly is (not) happening? Are any errors being reported? Please be specific. – Jonathan Lonowski Oct 23 '17 at 16:05
  • Possible duplicate of [How do I dynamically adjust css stylesheet based on browser width?](https://stackoverflow.com/questions/11962837/how-do-i-dynamically-adjust-css-stylesheet-based-on-browser-width) – Liam Oct 23 '17 at 16:05
  • @Liam I have 4 blocks and I need set clear after second block when width < 600 – Eugene Moskvin Oct 23 '17 at 16:07
  • Yes...Use media queries... – Liam Oct 23 '17 at 16:08
  • 3
    A few things I can see – 1) Typo. `getElements` is plural in `getElementsByClassName()`. 2) The previous function returns a collection, rather than a single Element, and that collection doesn't have a `setAttribute()` method. You'll need to loop through it and call the method on each Element directly. ([Related Q&A](https://stackoverflow.com/questions/10693845/what-do-queryselectorall-getelementsbyclassname-and-other-getelementsby-method)) – Jonathan Lonowski Oct 23 '17 at 16:09
  • Don't do this. How are you planning to handle the situation where the user resizes the window? And you have a class named `2`? –  Oct 23 '17 at 16:11
  • @torazaburo english is not easy for me, may be my html help you understand my problem – Eugene Moskvin Oct 23 '17 at 16:24

1 Answers1

-1

With class name you will get a collection of elements not an element, so you must change this:

getElementByClassName

to this:

getElementsByClassName

And you need to affect elemets in your collection collection:

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

And with media query:

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

And please remember that "2" is not a true class name and you need to change it to some thing like "div2"

Farzin Kanzi
  • 3,380
  • 2
  • 21
  • 23