js中display什么意思(js判断display属性)
javascript中display:inline-block;是什么意思?
display:inline-block
简单来说就是将对象呈递为内联对象,但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内,允许空格。
display:inline-block感觉与display:table-cell有些相似,例如对内部元素的包裹性。但是,由于
display:inline-block最大的不同就是其没有父元素的匿名包裹特性,这使得display:inline-block属性的使用非常自
由,可与文字,图片混排,可内嵌block属性元素,可以可以置身于inline水平的元素中。
采用inline-block布局还实现高度不等的布局。比如原新浪微博,见图片。(来源:张新恤的blog)
javascript中 visibility和display的区别
一、 display属性的常用属性值有两个,分别为
1、none: 隐藏,不占位,空件之间重新定位
2、block: 显示
二、? visibility属性的常用属性值有两个,分别为
?1、hidden: 隐藏,占位
2、visible : 显示
例子,
head
titlejs?display属性与visibility属性的区别_;/title
script?language="javascript"
???function?testVisibility()
???{
?????????document.all("tb_0").style.visibility="hidden";
????????document.all("tb_1").style.visibility="visible";?
???}
???function?testDisplay()
???{
????????document.all("tb_0").style.display="none";
????????document.all("tb_1").style.display="block";?
???}
???function?test()
???{
???????document.all("tb_0").style.visibility="visible";
???????document.all("tb_1").style.visibility="visible";?
???????document.all("tb_0").style.display="block";
???????document.all("tb_1").style.display="block";
???}
/script
/head
body
form?name="form1"?method="post"
???table?id="tb_0"
????tr
?????td内容测试--visible/td
????/tr
???/table
???table?id="tb_1"
????tr
?????td内容测试--hidden/td
????/tr
???/table
???input?type="button"?onClick="test();"?value="还原"
???input?type="button"?onClick="testVisibility();"?value="测试visibility"
???input?type="button"?onClick="testDisplay();"?value="测试display"
/form
/body
/html
js中的display
style是样式
display 是样式中的显示
"none"和"block"都是显示中的参数
none 为不显示
block为显示
参考
block : CSS1 块对象的默认值。用该值为对象之后添加新行
none : CSS1 隐藏对象。与visibility属性的hidden值不同,其不为被隐藏的对象保留其物理空间
inline : CSS1 内联对象的默认值。用该值将从对象中删除行
compact : CSS2 分配对象为块对象或基于内容之上的内联对象
marker : CSS2 指定内容在容器对象之前或之后。要使用此参数,对象必须和:after及:before 伪元素一起使用
inline-table : CSS2 将表格显示为无前后换行的内联对象或内联容器
list-item : CSS1 将块对象指定为列表项目。并可以添加可选项目标志
run-in : CSS2 分配对象为块对象或基于内容之上的内联对象
table : CSS2 将对象作为块元素级的表格显示
table-caption : CSS2 将对象作为表格标题显示
table-cell : CSS2 将对象作为表格单元格显示
table-column : CSS2 将对象作为表格列显示
table-column-group : CSS2 将对象作为表格列组显示
table-header-group : CSS2 将对象作为表格标题组显示
table-footer-group : CSS2 将对象作为表格脚注组显示
table-row : CSS2 将对象作为表格行显示
table-row-group : CSS2 将对象作为表格行组显示