javascript控制div等html元素的显示和隐藏.docxVIP

  • 7
  • 0
  • 约3.32千字
  • 约 6页
  • 2021-04-13 发布于天津
  • 举报

javascript控制div等html元素的显示和隐藏.docx

javascript 控制 DIV 等 html 元素的显示和隐藏 1 、编写 js 函数 lt;script type=text/javascriptgt; function display(id){ var traget=document.getElementById(id); if(traget.style.display==none){ traget.style.display=; }else{ traget.style.display=none; lt;/scriptgt; 2. 、 要显示 2. 、 要显示 / 隐藏的 html 元素加上 id 属性 lt;tablegt; lt;tr id=menu gt; lt;tdgt; 控制这个 lt;tdgt; 控制这个 tr 的显示 / 隐藏 lt;/tdgt; lt;/trgt; lt;/tablegt; 3 、添加按钮,链接等触发 3 、添加按钮,链接等触发 js 函数 lt;input type=button onclick=display( menu ) value= 显示 / 隐藏 /gt; lt;a href=# onclick=display( menu ) gt; 显示 /隐藏 gt; 显示 / lt;div id= style=display:none;gt; 广告 lt;/divgt; lt;input type=botton onclick= 函数 gt; lt;script language=javascriptgt; function 函数 { if(thisdiv.style.display==none){ thisdiv.style.display= else thisdiv.style.display=none lt;/scriptgt; 你先给 div 取个 ID=#8220;AA#8221;thisdiv=AA javascript 隐藏 / 显示表单对象 lt;SCRIPT language=javascriptgt; function expandIt(el) { whichEl =document.getElementById(el) none) {whichEl.style.display一 H. none) { whichEl.style.display 一 H. else { whichEl.style.display= whichEl.style.display = none; lt;/SCRIPTgt; el 是对象的 id ,不管是 tr 或者 table 等等先设置一下 id ,然后进行调用。 例: lt;a onclick=expandIt(ttchild); return false href=# gt;try itlt;/agt; 控制lt;tr id=ttchildgt;lt;td width=18gt;Examplelt;/tdgt;lt;/trgt; javascript 控制 页面控件隐藏显示的两种方法 方法的不同之处在于控件隐藏后是否还在页面上占位: div 的 visibility 可以控制 div 的显示和隐藏, 但是隐藏后页面 显示空白; 通过设置 display 属性可以使 div 隐藏后释放占用的页面空间。 方法一: document.alllt;PanelSMSgt;.style.visibility=hidden; document.alllt;PanelSMSgt;.style.visibility=visible; 方法二: document.alllt;PanelSMSgt;.style.display=none; document.alllt;PanelSMSgt;.style.display=inline; [HTML] 显示/隐藏 DIV 的技巧 (visibility 与 display 的差别)】 style=visibility: none; document.getElementById(typediv1).style.visibility=hidd en;// 隐藏 document.getElementById(typediv1).style.visibility=visib le;// 显示】 style=display: none; document.getElementById(typediv1).style.display=none ;//隐藏 document.getElementById(typediv1).style.display=;// lt;!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Tran

文档评论(0)

1亿VIP精品文档

相关文档