僅使用Javascript隱藏/顯示元素，而不會弄亂DOM

Question

只是想知道，是否可以僅使用Javascript隱藏/顯示元素，而無需使用“樣式”方法？ 因此，我不必在HTML元素中使用任何內聯CSS。 甚至，jQuery如何在其核心中執行hide / show事件？

Answer 1

jQuery通過操縱樣式來做到這一點。

有許多方法可以操縱DOM：

• 操作樣式屬性
• 添加/刪除某些樣式的類
• 只是簡單地從DOM本身添加/刪除元素
• 等等

但這都涉及以某種方式操作DOM，因為這是瀏覽器呈現的內容。

Answer 2

您可以切換CSS類來為您隱藏/顯示元素。 不過，無論如何您都必須操縱DOM。

.hidden {
   display: none;
}

document.getElementById("foo").className += " hidden";

Answer 3

您可以通過使用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');

Answer 4

讓我們使用純JavaScript做到這一點。

removeElement()使用Node.removeChild（）從DOM中刪除元素，並同時保存元素及其在DOM中的位置，以防萬一您想放回去。

如您所料， insertElement()將元素放回使用Node.insertBefore（）的位置 。

您可以在removedElements對象中跟蹤已刪除的元素。

沒有CSS /內聯樣式的修改。

 var removedElements = {}; function removeElement(id) { var obj = { element : document.getElementById(id), parent : document.getElementById(id).parentNode, nextSibling : document.getElementById(id).nextElementSibling, }; removedElements[id] = obj; obj.parent.removeChild(obj.element); } function insertElement(id) { var obj = removedElements[id]; obj.parent.insertBefore(obj.element, obj.nextSibling); delete removedElements[id]; } removeElement("h1"); insertElement("h1"); 

 <div id="container"> <h1 id="h1">Lorem Ipsum</h1> <p id="p">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div>