`
woshixushigang
  • 浏览: 578384 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类

style.display

    博客分类:
  • css
阅读更多
style.display
<html>
<head>
<script language=javascript>
function showclasscheck(checktype)
{
var objDiv = document.getElementById ("checkclass");
if (checktype==1)
objDiv.style.display = "block";
else
objDiv.style.display = "none";
}
</script>
</head>
<body>
<table border=0>
<tr>
<TD class=tablebody1>
<INPUT type=radio checked name=userclass value=0 onclick="showclasscheck(0)">隐藏
<INPUT type=radio name=userclass value=1 onclick="showclasscheck(1)" checked>显示</TD>
</TR>
</tr>
</table>
<div id="checkclass" align=center>测试区域</div>
</body>
</html>


程序体内:
if (xxxxxx){ //这里的xxxxx是判断语句
document.all.tmkh_net.style.display = ""; //显示
}
else{
document.all.tmkh_net.style.display = "none"; //不显示
}


style.display属性
display版本:CSS1/CSS2    兼容性:IE4+   NS4+ 继承性:无

语法:
display   :   block   |   none   |   inline   |   compact   |   marker   |   inline-table   |   list-item   |   run-in   |   table   |table-caption   |   table-cell   |   table-column   |   table-column-group   |   table-footer-group   |   table-header-group   |   table-row   |   table-row-group  

参数:
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 将对象作为表格行组显示  

说明:  

设置或检索对象是否及如何显示。
目前   IE5.5仅支持以上CSS1的参数。  
对应的脚本特性为display。


Firefox

关于HTML的style.display和style.visibility的区别大家都知道。
style.visibility一般取值'visible'或'hidden'进行显示和隐藏,但是元素所占据的网页位置是不释放的,只是看不见。效果就是该位置上空了一块。
而style.display一般取值'block'或'none'进行显示和隐藏,不过会释放掉网页上的位置。

但是如果在<table>中对<tr>或者<td>使用style.display来控制显示/隐藏某行或某个单元格的话,在IE中一切正常,但是在Firefox中就会出现错位的现象。
解决方法是把style.display='block' 写成 style.display=''就可以了。

引用自:http://hi.baidu.com/jack_blog520/blog/item/dbd04b09bc2fc3900b7b8266.html

 

分享到:
评论

相关推荐

    js中style.display=&quot;&quot;无效的解决方法.docx

    然而,有时候直接设置`style.display=""`可能会遇到无效的情况,这通常是因为JavaScript未能正确地改变元素的显示状态。本文将深入探讨这个问题,并提供有效的解决策略。 **问题描述:** 在JavaScript中,当尝试用`...

    JS中style.display和style.visibility的区别实例说明.docx

    JS 中 style.display 和 style.visibility 的区别实例说明 在 JavaScript 中,style.display 和 style.visibility 是两种常用的控制元素显隐的方法,但是它们之间有着根本的区别。 style.display style.display ...

    js中style.display=""无效的解决方法

    通常情况下,我们使用`style.display`属性来实现这一目的。`style.display`属性可以接受不同的值来控制元素的显示状态,常见的有`none`(隐藏元素)、`block`(块级显示元素)、`inline`(内联显示元素)等等。 当...

    js中style.display=””无效的解决方法

    本文实例讲述了js中style.display=””无效的解决方法。分享给大家供大家参考。具体解决方法如下: 一、问题描述: 在js中我们有时想动态的控制一个div显示或隐藏或更多的操作,但如果我们style.display=””可能...

    JavaScript中的style.display属性操作

    `style.display`的兼容性非常广泛,从Internet Explorer 4+到Netscape Navigator 4+都支持。由于它不是继承属性,所以子元素不会自动继承父元素的`display`设置。这使得开发者能够精确控制每个元素的显示方式。 在...

    js style.display=block显示布局错乱问题的解决方法

    在JavaScript编程中,有时我们可能需要通过操作DOM元素的`style.display`属性来控制元素的可见性,例如将其从隐藏切换到显示。然而,在实际应用中,这种操作可能会导致一些布局错乱的问题,特别是在处理表格(table...

    JS中style.display和style.visibility的区别实例说明

    在JS中可以通过设置style.display或者style.visibility属性来控制元素是否显示,在style.display=block和style.visibility=visible的时候,元素被显示,在style.display=none和style.visibility=hidden的时候,元素...

    selenium操作隐藏的元素(python+Java)

    js = 'document.querySelectorAll("select")[0].style.display="block";' driver.execute_script(js) # 选择下拉框的选项 Select(sel).select_by_value('opel') ``` 在上面的代码中,我们首先使用 `find_element_by...

    不规则TAB选项卡效果

    document.getElementById("TabTab03Con1").style.display="block"; document.getElementById("TabTab03Con2").style.display="none"; document.getElementById("TabTab03Con3").style.display="none"; ...

    js 调色板 纯js

    function DisplayClrDlg(display) { var clrPanel = document.getElementById("colorpanel"); if (display) ... clrPanel.style.display = "block"; } else { clrPanel.style.display = "none"; } }

    菜单栏不刷新

    document.getElementById(show_item).style.display = "block"; var items = document.getElementsByClassName("title"); for (var j=0; j&lt;items.length; j++) { items[j].onclick = function() { var o = ...

    javascript经典特效---图片显隐效果.rar

    要控制图片的显示和隐藏,我们需要获取到图片元素,并对其`style.display`属性进行操作。 1. 获取图片元素: 使用`document.getElementById()`、`document.querySelector()`或`document.querySelectorAll()`方法...

    jquery 设置style:display的方法

    $(“#id”)[0].style.display = ‘none’; $(“#id”)返回的是JQuery 它是个集合肯定有display属性 $(“#id”).show()表示display:block, $(“#id”).hide()表示display:none; $(“#id”).toggle()切换元素的可见...

    display与visibility的区别

    window.setTimeout("blueText.style.display='block';", 3000, "JavaScript"); } else { me.style.display = "block"; alert("现在是 'block'."); } } } (this)" style="position:relative"&gt; 测试 "hidden...

    图像70周年代码.zip

    ()' style='display: none;'&gt;换个样式 ()'&gt;生成头像 &lt;div style='display: none'&gt; &lt;img class='hide' id='hat0' src='./img/hat0.png'/&gt; &lt;img class='hide' id='hat1' src='./img/hat1.png'/&gt; ...

    最简单的JavaScript图片轮播代码(两种方法).pdf

    &lt;li style="display: none;"&gt;&lt;img src="image1.jpg" alt="Image 1" /&gt; &lt;li&gt;&lt;img src="image2.jpg" alt="Image 2" style="opacity: 0;"&gt; &lt;!-- 更多图片... --&gt; 上一张 下一张 ``` **CSS样式** ```css #...

    javascript获取隐藏元素(display:none)的高度和宽度的方法

    var originalDisplay = style.display; var originalVisibility = style.visibility; var position = style.position; // 移动元素脱离文档流 style.position = 'absolute'; style.visibility = 'hidden'; ...

    JavaScript中的style.cssText使用教程

    很多人用过 style.color、style.display 等直接设置元素的样式属性,但是 style.cssText 用过的人就不多了。 cssText 本质是什么? cssText 的本质就是设置 HTML 元素的 style 属性值。 cssText 怎么用? 代码如下:...

Global site tag (gtag.js) - Google Analytics