Question

我在页面上有几个元素。类似的东西：

<div id="el1"><div id="el2"><span id="el3">1</span><span id="el4">2</span></div><span id="el5">3</span></div>

我需要使用它们的ID禁用/启用它们中的任何一个。

<input type="radio" name="do" onclick="disable(document.getElementById('el4'));">        
<input type="radio" name="do" onclick="enable(document.getElementById('el4'));">

disable（）和enable（）函数应该在什么时候禁用元素？

通过“禁用”我的意思是让它对用户不可见，“id”无法访问，并且可以通过“enable（）”函数进行恢复。

是否可以打开/关闭元素？完全是，我的意思是。

Answer 1

您可以使用

document.getElementById('el4').style.display='none'; // hide
document.getElementById('el4').style.display=''; // show

你可以定义这样的函数：

function hide(element){
   element.style.display='none';
}
function show(element){
   element.style.display='';
}

我真的建议不使用启用和禁用字词，因为它们有其他含义（禁用的小部件是您可以看到的但你无法改变。）

更好的解决方案是定义一个css类

.hidden {
   display: none;
}

并更改js中的类：

document.getElementById('el4').classname='hidden'; // hide

如果要完全删除元素，可以使用removeChild：

var node = document.getElementById('el4');
node.parentNode.removeChild(node);

但它几乎没用。喜欢像通常那样隐藏。

Answer 2

function  addEl4(){
   var elem = document.getElementById('el2'); 
   var newElem = document.createElement('div');
   newElem.setAttribute('id', 'el4');
   newElem.innerHTML = 2;
   elem.appendChild(newElem);
};

function  disable(elem){
   var container = document.getElementById('el2'); 
   container.removeChild(elem);
};

如果您正在谈论完全从页面中删除元素。然后你可以使用.removeChild()方法.. 然后需要将它附加到你正在谈论的div ..

<强> Check Fiddle

如何完全禁用/启用html元素？

2 个答案: