`
minejava
  • 浏览: 9668 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

关于js控制页面“显示、隐藏”元素

阅读更多
在html页面中遇到js控制“显示、隐藏”页面元素时的方法,先贴上代码:
<html>
<body> 
<div   id= "divID"   style= "display:inline"> 
测试 
</div> 
<input type=button value= "显示" onclick='document.getElementById("divID").style.display="inline"'> 
<input type=button value= "隐藏" onclick='document.getElementById("divID").style.display="none"'> 
</body>
</html>

注意,这里使用display属性的inline,而不用block,是因为在html描述中:
block:此元素将显示为块级元素,此元素前后会带有换行符。
inline:默认。此元素会被显示为内联元素,元素前后没有换行符。
即使用block会出现换行。代码:
<html>
<body> 
<div   id= "divID"   style= "display:block"> 
测试 
</div> 
<input type=button value= "显示" onclick='document.getElementById("divID").style.display="block"'> 
<input type=button value= "隐藏" onclick='document.getElementById("divID").style.display="none"'> 
</body>
</html>




分享到:
评论

相关推荐

    点击元素以外的地方隐藏元素插件

    在IT行业中,jQuery是一个广泛使用的JavaScript库,它简化了HTML文档遍历、事件处理、动画设计和Ajax交互等任务。...在实际项目中,它能有效提升网页的交互性和可用性,特别适合需要动态显示和隐藏元素的场景。

    js控制层隐藏和显示

    总结起来,JavaScript的事件监听机制使得我们可以方便地控制页面元素的隐藏和显示,以此实现丰富的用户交互。无论是点击还是鼠标移动,都能为网页增添活力,使内容展示更加灵活多样。同时,结合服务器返回的数据,...

    JS 隐藏同级的元素后只显示JS文件

    2. **遍历并隐藏元素**:接着,我们需要遍历这些元素并将其设置为不可见。这可以通过改变元素的`style.display`属性实现。默认情况下,`display:none`会让元素从页面布局中消失。 ```javascript for (var i = 0; i...

    微信小程序中的滑动页面隐藏和显示组件功能的实现代码

    首先,我们可以在wxml文件中定义页面结构,比如一个按钮,并给它绑定点击事件,以及设置一个用于控制显示状态的属性: ```xml !hidden?'mask-con-show':''}}" bindtap="sendDynamic"&gt; !hidden?'mask-con-show':''}...

    JS实现各种动态显示隐藏div效果

    实践中,还可以结合CSS3的`animation`属性和JS的事件监听来实现更复杂的交互行为,例如点击按钮触发显示隐藏效果,或者根据用户滚动页面自动显示和隐藏元素。对于前端开发者来说,理解和掌握这些技巧是提升网页动态...

    js/jquery实现的指定元素的隐藏显示

    在JavaScript和jQuery的世界里,控制页面元素的可见性是日常开发中的常见操作。"js/jquery实现的指定元素的隐藏显示"这一主题涵盖了如何利用这两种强大的工具来改变HTML元素的显示状态,以及如何处理文本内容的变化...

    javascript 控制 html元素 显示/隐藏实现代码

    本文将详细介绍如何使用JavaScript来实现HTML元素的显示与隐藏,并提供两种不同的方法来控制页面控件的显示状态。 首先,我们要清楚HTML元素在默认情况下通过CSS的display属性来控制其是否显示。display属性可以是...

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

    例如,以下是一个使用jQuery库的JavaScript函数,用以获取隐藏元素的尺寸: ```javascript function getDefaultStyle(obj, attribute) { return obj.currentStyle ? obj.currentStyle[attribute] : document....

    js 进行打印控制 打印时隐藏按钮

    通过上述讨论可以看出,利用JavaScript控制网页打印过程中的元素隐藏是一项非常实用的技术。不仅可以提升用户体验,还能根据不同需求灵活定制打印效果。开发者可以根据实际项目需求,灵活运用这些技巧,以实现更加...

    JS显示隐藏HTML控件

    4. **JavaScript控制显示和隐藏** - 修改`style.display`:`element.style.display = "none"`可隐藏元素,`element.style.display = "block"`(或原值)可显示。 - 使用`classList`操作CSS类:可以添加、移除或...

    JS控制HTML元素的显示和隐藏的两种方法

    利用来JS控制页面控件显示和隐藏有两种方法,两种方法分别利用HTML的style中的两个属性,两种方法的不同之处在于控件隐藏后是否还在页面上占空位。  方法一: document.getElementById("EleId").style.visibility=...

    asp.net客户端控制框架的显示或隐藏

    接下来,我们将讨论如何使用JavaScript来控制这些框架的显示和隐藏。JavaScript是一种客户端脚本语言,它可以实时修改网页的DOM(文档对象模型),从而实现动态效果。对于框架的显示和隐藏,我们可以操作框架的`...

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

    隐藏元素的定义 在 HTML 中,元素可以通过多种方式来隐藏,例如使用 `display: none`、`visibility: hidden` 等 CSS 属性来隐藏元素。这些隐藏的元素在网页上不可见,但是在页面的源代码中依然存在。Selenium 无法...

    js页面滚动自动隐藏和显示顶部菜单.zip

    这个“js页面滚动自动隐藏和显示顶部菜单”的压缩包文件就提供了实现这一功能的JavaScript代码示例。 首先,我们要了解JavaScript(JS)在网页开发中的作用。JavaScript是一种客户端脚本语言,它允许开发者在用户...

    很好用的JS左侧导航菜单,滑过显示,移开隐藏

    在本例中,JS 用来监听鼠标的移动事件,控制导航菜单的显示和隐藏。 2. **HTML结构**:在`index.html`文件中,会定义一个左侧导航菜单的基本HTML结构,可能包含`&lt;nav&gt;`、`&lt;ul&gt;`、`&lt;li&gt;`等元素。每个`&lt;li&gt;`元素代表...

    d3实现部分关系隐藏与显示

    在这个场景中,"d3实现部分关系隐藏与显示"是一个关于如何利用D3.js来动态控制图表中特定关系的可见性的主题。这个功能在展示复杂网络图或关系图时特别有用,因为它可以帮助用户更专注于他们关心的数据子集,提高...

    JS显示隐藏DIV(动画效果)

    // 隐藏元素 } else { opacity -= 0.1; element.style.opacity = opacity; } } } // 使用示例 const myDiv = document.getElementById("myDiv"); fadeIn(myDiv); // 渐显 ``` 此外,为了确保兼容性,我们...

    Vue实例课程-定时显示隐藏元素

    在“Vue实例课程-定时显示隐藏元素”这个主题中,我们将深入探讨如何利用Vue.js实现元素的定时显示与隐藏,这在创建动态用户界面时非常常见。 首先,我们要了解Vue实例是Vue框架中的核心概念。当你创建一个Vue实例...

    怎么隐藏和显示页面根据不同的条件

    为了控制表单元素的显示和隐藏,使用了客户端脚本语言JavaScript。具体来说: - **函数 `ShowHideDays(value)`**:该函数接收一个参数`value`,即用户在下拉框中选择的值。如果用户选择了“月份”(`value == ...

    js页面顶端显示信息

    在这个场景中,"js页面顶端显示信息"是指通过JavaScript技术在网页的顶部创建一个可关闭的信息提示框,通常用于显示通知、警告或者重要消息。这种功能在现代网页设计中非常常见,因为它能够提供即时反馈,增强用户...

Global site tag (gtag.js) - Google Analytics