CSS中的display和visibility
css中display和visibility语法,他们都可以隐藏和显示html元素。看齐来他们很相似,所以很多人还是会搞错。
谈们的属性分别如下:
display:none|block;
display:none;时隐藏该html元素,确切的说,是在浏览器中消除该元素,不占屏幕的空间。若其下有其他元素,就会上移到该空间区域(好像桌子上有100块钱,现在我把它放在抽屉里藏起来,桌子上放100钱的地方可以放在其他任何东西)。
dispaly:block;显示已经隐藏的html元素,如果别的元素占有了该空间时,他将下移,空间重新别原来的元素占有。(把100块钱重新从抽屉里那出来放回桌子上)
visibility:hidden|visible;
visibility:hidden;隐藏该元素,正真的隐藏,但他还占有那块空间。这时,(桌子上有100块钱,这是我盖了桌布把他隐藏起来,钱还在那里)。
visibility:visible;让元素显示(拿掉了桌布,看到了100块钱)。
例子:
<html> <head> <script type="text/javascript"> function testDisplay() { /***测试Display属性***/ var divD = document.getElementById("testD"); if(divD.style.display=="none") { divD.style.display = "block"; /*****可见****/ } else { divD.style.display = "none"; /*****不可见****/ } } function testVisibility() { /***测试Visibility属性***/ var divV = document.getElementById("testV"); if(divV.style.visibility =="hidden"){ divV.style.visibility ="visible"; }else{ divV.style.visibility = "hidden"; } } </script> </head> </body> <div id="testD" style="border:#ddd 1px solid"> <div style="display:block;border:#ccc 2px solid"> <div style="visibility:visible;border:#aaa 2px solid"> Display </div> </div> </div> <div id="testV" style="border:#ddd 1px solid"> <div style="display:block;border:#ccc 2px solid"> <div style="visibility:visible;border:#aaa 2px solid"> Visibility </div> </div> </div> <input type="button" value="测试Display" onclick="testDisplay()"/> <input type="button" value="测试Visibility" onclick="testVisibility()"/> </body> </html>
运行一下框中的代码就可以看到,当testD隐藏时,里面所有的框都隐藏,而且下面的divV和按钮都上移,而当divV隐藏的时候,只有他自己隐藏了,里面的其他元素都没有隐藏。(这里主要是把里面的div元素style属性设置为display和visible,如果去掉也会隐藏,但是,按钮还是不会上移,可以试一下。)
相关推荐
用JavaScript隐藏控件的方法有两种,分别是通过设置控件的style的“display”和“visibility”属性。当style.display=”block”或style.visibility=”visible”时控件或见,当style.display=”none”或style....
用JavaScript隐藏控件的方法有两种,分别是通过设置控件的style的“display”和“visibility”属性。 当style.display=”block”或style.visibility=”visible”时控件或见,当style.display=”none”或style....
用JavaScript隐藏控件的方法有两种,分别是通过设置控件的style的“display”和“visibility”属性。当style.display=”block”或style.visibility=”visible”时控件或见,当style.display=”none”或style....
javascript控制页面控件隐藏显示的两种方法,方法的不同之处在于控件隐藏后是否还在页面上占位 方法一: 代码如下: document.all[“panelsms”].style.visibility=”hidden”; document.all[“panelsms”].style....
利用来JS控制页面控件显示和隐藏有两种方法,两种方法分别利用HTML的style中的两个属性,两种方法的不同之处在于控件隐藏后是否还在页面上占空位。 方法一: document.getElementById("EleId").style.visibility=...
蓝驿轨迹-ajax+xml实现省市区无刷新联动源码 ...<script language="javascript" src="js/PCA.js"> <!--省市区--> <INPUT id="lbl_provice" type="text" runat="server" style="DISPLAY: none" value="浙江省"> ...
<script language="JavaScript" type="text/javascript" src="editor/editor.js"> <script language="javascript">createEditor('test','content','400px','200px'); 注意: 1.createEditor(editorId,contentId,...
不同的是“display”不但隐藏控件,而且被隐藏的控件不再占用显示时占用的位置,而“visibility”隐藏的控件仅仅是将控件设置成不可见了,控件仍然占俱原来的位置。 <p> <input id=’control’ value=”想要隐藏...
当选择"Show Column"中的选项后,Javascript方法ShowCol将会被调用,它将移除每个单元格的display:none样式,这一列将会被再次显示. 在服务端显示/隐藏GridView的列 服务端的例子将通过RowCreated事件给每个列头添加...
JS代码 <input type=”file” id=”fileupload” name=”file” /> 第一种: (display:none时不能用) 代码如下:var obj = document.getElementById(‘fileupload’) ; obj.select(); document....
<object id="factory" viewastext style="display:none" classid="clsid:1663ed61-23eb-11d2-b92f-008048fdd814" codebase="send_js/smsx.cab#Version=6,6,440,26"> 注意 codebase 属性,它是指向smsx.cab文件的...
var acx = '<div style="display: none;">'; //图片粘贴上传控件 acx += ' <object id="Paster" classid="clsid:DC4A6931-3570-44b4-842D-C13EE637BBC1"'; acx += ' codebase=...
1、首先将压缩文件内的css和js文件夹添加到项目中 2、添加所有的js和css的引用 3、添加一个隐藏控件 <select name="sldate" id="sldate" class="settings" style="display: none"> <option value="date">Date 4...
获取隐藏元素(display:none)的物理尺寸 问题及场景 假如我们有这样一个输入框,点击能展开选择。如下图: 在这里输入框和下方的展开区域是分离的,独立的两个控件!初始状态下面的可选框是隐藏的(ng-show=false)...
方法一: 代码如下: document.getElementById(“控件ID”).style.visibility=”hidden”; document.getElementById(“控件ID”).... 方法一隐藏后 页面的位置还被控件占用 只是不显示 类似于.net验证控件\u7684Display=
<div style="display:none"> classid="clsid:1806E199-89CA-4293-8FF5-D90103D265C9" codebase="/ImageCom.cab#version=1.0" id="PicStrechOcx" > 以下为相关 js函数: function getStrechPic(sPicname,...
-Button控件将不再自动拥有display:inline属性,如果希望两个按钮在一行显示,请为第一个按钮设置CssStyle="float:left;"属性。 -修正了弹出菜单的位置在Firefox下不正确的BUG(feedback:eroach)。 -为TriggerBox...
-Button控件将不再自动拥有display:inline属性,如果希望两个按钮在一行显示,请为第一个按钮设置CssStyle="float:left;"属性。 -修正了弹出菜单的位置在Firefox下不正确的BUG(feedback:eroach)。 -为TriggerBox...
有用的控件,经常使用设置背景透明 设置webview的backgroundColor属性为[UIColor clearColor]; ? 1 webView.backgroundColor = [UIColor clearColor]; 为webview中的HTML页面的body标签添加CSS背景样式设置 ? ...
代码如下:[removed]function choose_date_czw(date_id,objtd){if(date_id==”choose_date_czw_close”){ document.getElementByIdx_x_x(“choose_date_czw_id”).style.display=”none”; return;}if(objtd!=...