僅使用Javascript而不使用DOM的隱藏/顯示元素

想知道，是否可以使用Javascript來隱藏/顯示不使用「style」方法的元素？所以我不必在我的HTML元素中使用任何內聯CSS。甚至，jQuery如何在其核心中執行hide/show事件？僅使用Javascript而不使用DOM的隱藏/顯示元素

來源

2016-04-25 Anna

jQuery的改變'style'屬性。更改CSS（直接或通過添加類）是更改元素外觀的唯一方法。您可以通過在DOM中添加/刪除元素來顯示/隱藏元素，但是必須跟蹤您將它們從何處拉出以及如何放回。 –

您可以使用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第2（ classList.toggle()支持大多數現代瀏覽器）

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

jQuery的

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

來源

2016-04-25 22:17:31 fbid

您可以切換將爲您隱藏/顯示元素的CSS類。儘管如此，您必須在任何情況下操作DOM。

.hidden { 
    display: none; 
} 

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

來源

2016-04-25 22:11:34 Ozrix

jQuery通過操作樣式來完成它。

有很多方法來操縱DOM：

操縱樣式屬性
添加/一些風格
只是簡單的添加刪除類/從DOM本身
等

但它都涉及操縱DOM的某種方式，因爲那是瀏覽器呈現的內容。

來源

2016-04-25 22:14:39 BryanGrezeszak

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

removeElement()使用Node.removeChild()從DOM中刪除該元素，並且還保存元素及其在DOM中的位置，以防您想要放回原處。

insertElement()，正如您猜測的那樣，將元素放回到使用Node.insertBefore()的地方。

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

沒有CSS /內聯式修改。

var removedElements = {}; 
 

 
function removeElement(id) { 
 
    var obj = { 
 
    element \t : document.getElementById(id), 
 
    parent \t : document.getElementById(id).parentNode, 
 
    nextSibling \t : 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>

來源

2016-04-25 22:42:41 akinuri

僅使用Javascript而不使用DOM的隱藏/顯示元素

回答

相關問題