显示/隐藏
1。编写js函数
<script type="text/javascript">
function display(y){$(y).style.display=($(y).style.display=="none")?"":"none";}
function $(s){return document.getelementbyid(s);}
</script>
2. 要显示/隐藏的html元素加上 id 属性
<table>
<tr id="menu" >
<td>控制这个tr的显示/隐藏</td>
</tr>
</table>
3,添加按钮,链接等触发 js 函数
<input type="button" onclick="display('menu')" value="显示/隐藏"/>
<a href="#" onclick="display('menu')" >显示/隐藏</a>
javascript显示隐藏层<div id="layer" style="display:none;">广告</div>
<input type="botton" onclick="display(layer)">
二:javascript控制页面控件隐藏显示的两种方法
javascript控制页面控件隐藏显示的两种方法,方法的不同之处在于控件隐藏后是否还在页面上占位
方法一:
document.all["panelsms"].style.visibility="hidden";
document.all["panelsms"].style.visibility="visible";
方法二:
document.all["panelsms"].style.display="none";
document.all["panelsms"].style.display="inline";
方法一隐藏后 页面的位置还被控件占用 只是不显示
方法二隐藏后 页面的位置不被占用
创建/删除
如果我要创建一个div元素。
1.使用dom对象创建:
使用document.createelement('div')方法创建元素。
2.使用jquery创建:
使用$('<div>通过jquery创建的新元素</div>')的方法直接创建元素。
如果需要将id是‘div2js'的div元素删除。
1.使用dom对象
首先需要找到被删元素的父元素,通过父元素将其需要删除的子元素删除。
var el = document.getelementbyid('div2js');
el.parentnode.removechild(el);
2.使用jquery
直接找到并删除。
$('#div2js').remove();
最后我们来看个实例
<script type="text/javascript" language="javascript">
function inputonblur()
{ var name=document.getelementbyid("name").value;
if(name.length >10 || name.length<2)
{
var element=document.getelementbyid("message");
if(element)
{
//alert(element.parentnode.innerhtml);
element.parentnode.removechild(element);
}
var myspan=document.createelement("span");
document.getelementbyid("containers").appendchild(myspan);
myspan.id = "message";
myspan.innerhtml = "<img src='false.jpg' alt='请输入正确的姓名'/>请输入正确的姓名";
}
else{
var element=document.getelementbyid("message");
if(element)
{
//alert(element.innerhtml);
element.parentnode.removechild(element);
}
var myspan=document.createelement("span");
document.getelementbyid("containers").appendchild(myspan);
myspan.id = "message";
myspan.innerhtml = "<img src='true.gif' alt='该用户名输入正确'/>该用户名输入正确";
}
}
</script>
<div>
姓名:<input id="name" type="text" onblur="inputonblur()" /><span id="containers"></span></div>
<script language="javascript">
document.getelementbyid("containers").innerhtml = "<font color=red>请输入姓名</font>";
以上就是javascript 显示/隐藏,创建/删除html元素用法实例详解的详细内容。