Невозможно добавить класс динамически в окне изменения размера

Question

Вот ДИВ, к которому я пытаюсь добавить класс

<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} 

Но класс не добавлялся, я не знаю почему?

EDIT Я использую медиа-запросы. В этом случае два класса имеют одно и то же имя. Если я изменил один другой, это тоже изменится, поэтому я добавляю класс динамически, и это не полная ширина окна, которую мне нужно изменить.

ПОЧЕМУ ЯВЛЯЮТСЯ ЛЮДЬМИ, КОТОРЫЕ БЫЛИ ЗАКЛЮЧЕННЫМИ КАЖДОМУ ВОПРОСУ ЗДЕСЬ?

Answer 1

Не используйте # при выборе элемента по 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> 

Answer 2

Поскольку вы меняете ширину элемента на окне изменения размера, в идеале вы должны использовать @media CSS3 в вместо запросов!

В вашем случае запрос @media будет:

<style> 
    @media (max-width: 640px){ 
     #sidebar{ 
      width: 45%; 
     } 
    } 
</style> 

Это плохая идея, чтобы написать Javascript только для этой цели.

Подробнее:CSS @media queries | MDN

EDIT:

Если вы добавляете класс динамически, просто отметим, что в @media запросе:

<style> 
    @media (max-width: 640px){ 
     .sidebar{ 
      width: 45%; 
     } 
    } 
</style> 

Держите его просто. :)