DOMをつぶすことなくJavascriptのみを使用して要素を非表示/表示する

Question

「スタイル」メソッドを使用せずに要素を非表示にするにはJavascriptのみを使用できますか？ですから、HTML要素にインラインCSSを使用する必要はありません。それとも、jQueryはどのようにしてhide/showイベントをコアで実行しますか？

Answer 1

これは、JavascriptとJqueryの両方を使用してCSSクラスを追加/削除することで実行できます。

これはDOM要素に追加されたCSSクラスであると仮定すると：

.hide { display: none} 

次にあなたが使用することができます。

Javascriptをv2の（

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; 
} 

最新のブラウザではclassList.toggle()がサポートされています）

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

jQueryの

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

Answer 2

エレメントを表示/非表示にするCSSクラスを切り替えることができます。あなたはどんな場合でもDOMを操作する必要があります。

.hidden { 
    display: none; 
} 

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

Answer 3

jQueryはスタイルを操作することでそれを行います。

DOMを操作するための多くの方法があります。

• スタイル属性を操作するだけで、プレーンDOM自体
から要素を削除/追加するいくつかのスタイル
• を持つクラスを追加/削除が
• など

しかし、それは何らかの形でDOMを操作することを伴います。そのため、はブラウザのレンダリング内容です。

Answer 4

のは、この使用して、純粋な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>