只是想知道,是否可以仅使用Javascript隐藏/显示元素而不使用“样式”方法?所以我不必在我的HTML元素中使用任何内联CSS。或者甚至,jQuery如何在其核心中执行hide / show事件?
答案 0 :(得分:2)
jQuery通过操作样式来实现它。
有很多方法可以操纵DOM:
但这一切都涉及以某种方式操纵DOM,因为是浏览器呈现的内容。
答案 1 :(得分:1)
您可以切换隐藏/显示元素的CSS类。但是,你必须在任何情况下操纵DOM。
.hidden {
display: none;
}
document.getElementById("foo").className += " hidden";
答案 2 :(得分: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');
答案 3 :(得分:1)
让我们使用纯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");
&#13;
<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>
&#13;