javascript - 仅使用 Javascript 隐藏/显示元素而不干扰 DOM

Question

只是想知道，是否可以仅使用 Javascript 来隐藏/显示元素而不使用“样式”方法？所以我不必在我的 HTML 元素中使用任何内联 CSS。甚至，jQuery 如何在其核心中执行隐藏/显示事件？

Answer 1

您可以通过使用 Javascript 和 Jquery 添加/删除 CSS 类来实现。

假设这是添加到 DOM 元素的 CSS 类:

.hide { display: none}

然后你可以使用:

Javascript v1

function toggleClass(element, className){
  if (!element || !className){
    return;
  }

  var classString = element.className, nameIndex = classString.indexOf(className);
  if (nameIndex == -1) {
    classString += ' ' + className;
  }
  else {
    classString = classString.substr(0, nameIndex) + classString.substr(nameIndex+className.length);
  }
  element.className = classString;
}

Javascript v2(大多数现代浏览器都支持 classList.toggle())

document.getElementById('foo').classList.toggle('hide');

jQuery

$('#foo').toggleClass('hide');