#css #innerhtml #classname
#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>
Комментарии:
1. Если у стороннего наблюдателя хватило бы порядочности указать причину этого?