Изменение имени класса против изменения innerHTML

#css #innerhtml #classname

Вопрос:

Мне нужно переключить два слова (например, Привет и мир). Теперь я создал два span s и, используя CSS, переключаю их. Однако я могу создать один div и изменить только innerHTML. Мой вопрос в том, какой из них действителен и эффективен? Ниже приведен пример кода HTML, CSS, JS.

 <div class='enablecss2'>
    <span class='css1'>Hello</span>
    <span class='css2'>World</span>
</div>

.css2 {
    display:none;
}

.enablecss2 .css2 {
    display:block;
}

.enablecss2 .css1 {
    display:none;
}

<script>
    function toggle(el,event)
      { 
          if(el.className == '')
              el.className = 'enablecss2';
          else
              el.className = '';
      }

</script>

1. или вариант C, который должен был бы использовать .textContent, а не возиться с двумя элементами или innerHTML

2. Если вы установите el.className = 'enablecss2' , он перезапишет значение атрибута class, поэтому он перестанет содержать ‘css1’.

3. Учитывая доступность и вспомогательные технологии, метод A может быть лучшим выбором, поскольку у вас есть оба слова в разметке, и в конце пользователь должен видеть весь контент (оба слова).

Ответ №1:

Оба являются допустимыми методами, и с точки зрения скорости рендеринга переключателя это не имеет значения. Но с точки зрения эффективного кодирования (= меньше кода с тем же результатом), innerHTML метод является лучшим методом, потому что для этого вам нужно меньше HTML и нет CSS-кода:

 <div class='enablecss2'>
    Hello
</div>

<script>
// your toggle function
</script>