Скрыть/показать элементы, используя только Javascript без помех с DOM

Просто интересно, можно ли использовать только Javascript для скрытия/отображения элементов без использования метода «стиля»? Поэтому мне не придется использовать встроенный CSS в свой HTML-элемент. Или даже, как jQuery выполняет событие hide/show в своем ядре?Скрыть/показать элементы, используя только Javascript без помех с DOM

источник

2016-04-25 Anna

JQuery изменяет style' атрибут '.Изменение CSS (как напрямую, так и путем добавления класса) - единственный способ изменить внешний вид элементов. Вы можете отображать/скрывать элементы, добавляя/удаляя их из DOM, но затем вам нужно отслеживать, откуда их вытащили и как их вернуть. –

Вы можете сделать это, добавив/удалив класс CSS с Javascript и JQuery.

Предполагая, что это класс CSS, который добавляется к DOM элементу:

.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');

источник

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() удаляет элемент из DOM с помощью Node.removeChild(), а также сохраняет как элемент, так и его положение в DOM, если вы хотите вернуть его.

insertElement(), как вы могли догадаться, ставит элемент обратно там, где он использовал Node.insertBefore().

Вы можете отслеживать удаленные элементы в объекте removedElements.

Нет модификации CSS/inline-стиля.

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

ответ

Смежные вопросы