Почему перед responsive ставится пробел?

285

11 октября 2021, 11:00

function myFunction() { 
  var x = document.getElementById("myTopnav"); 
  if (x.className === "topnav") { 
    x.className += " responsive"; 
  } else { 
    x.className = "topnav"; 
  } 
}

<div class="topnav" id="myTopnav"> 
  <a href="#home" class="active">Home</a> 
  <a href="#news">News</a> 
  <a href="#contact">Contact</a> 
  <a href="#about">About</a> 
  <a href="javascript:void(0);" class="icon" onclick="myFunction()"> 
    <i class="fa fa-bars"></i> 
  </a> 
</div>

Answer 1

Потому что className — строка, содержащая названия классов элемента, в таком виде, как они записаны в HTML... в котором несколько разных классов должны быть разделены через пробел.

А x.className += " responsive"; то же самое, что и

x.className = x.className + " responsive";

Если не поставить пробел - окажется, что у него там один длинный класс, а не два разных:

let moo = document.querySelector('.moo'); 
 
console.log( 'className: ' + moo.className ); 
console.log( 'Type: ' + typeof moo.className ); 
 
moo.className += "класс-без-пробела"; 
 
console.log( 'className: ' + moo.className );

<div class="moo boo doo zoo foo CLASS-111"></div>

Это еще добавление класса... а с удалением заморочек еще сильнее. Поэтому в современном JS добавление/удаление классов прописывают через classList, который хранит список классов, а не строку, и имеет встроенные методы:

let demo = document.querySelectorAll('.demo'); 
 
demo[0].classList.add('red'); 
demo[1].classList.remove('red'); 
 
demo[2].onclick = function(){ 
  demo[2].classList.toggle('red'); 
}

.red { 
  color: red; 
  font-weight: bold; 
} 
 
p { 
  user-select: none; 
  cursor: pointer; 
}

<p class="demo">Не было красного цвета - а появилось...</p> 
 
<p class="demo red">Был красный цвет - да пропал.</p> 
 
<p class="demo red">А мой цвет будет переключаться при клике.</p>

Answer 2

Запись

<div class="class1 class2"/>

обозначает, что div имеет два класса class1 и class2.

Соответственно ваш код

if (x.className === "topnav") {
  x.className += " responsive";
} else {
  x.className = "topnav";
}

делает следующее

если у элемента присутствует только класс topnav, то добавить ему еще и класс responsive
Иначе установить ему только класс topnav

Пример в коде

function myFunction() { 
  var x = document.getElementById("myTopnav"); 
  if (x.className === "topnav") { 
    x.className += " responsive"; 
  } else { 
    x.className = "topnav"; 
  } 
  return false; 
}

.topnav { 
  border: 1px solid black; 
} 
 
.responsive { 
  background-color: yellow; 
}

<div class="topnav" id="myTopnav"> 
  <a href="javascript:void(0);" class="icon" onclick="myFunction()"> 
    <i class="fa fa-bars">Click</i> 
  </a> 
</div>

Здесь класс topnav отвечает за наличие рамки вокруг элемента, а класс responsive за наличие желтого цвета фона. Их комбинация topnav responsive дают элемент желтого цвета с черной рамкой