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

指定元素的隐藏|显示

阅读更多

一般像这样的双重状态我们都会提供3个api----show|hide|toggle

 

下面的api主要还是设置style.display来控制显示和隐藏。可以参考jQuery的做法,增加部分动画效果

 

1、先来显示吧。

 

 

/*
*show - show the element*
*@function*
*@param {string||HTMLElement} element*
*@return {HTMLElement}*
*TODO--later i will add speed to this api just like jquery*
http://code.jquery.com/jquery-1.4.js
*/
ZYC.dom.show = function(element){
    element = ZYC.dom.g(element);
    element.style.display = "";
    return element;
};
 

 2、再隐藏起来

 

 

/*
*hide - hide the element*
*@function*
*@param {string||HTMLElement} element*
*@return {HTMLElement}*
*TODO--later i will add speed to this api just like jquery*
http://code.jquery.com/jquery-1.4.js
*/
ZYC.dom.hide = function(element){
    element = ZYC.dom.g(element);
    element.style.display = "none";
    return element;
};

 

3、可切换当前显示和隐藏的

 

 

/*
*toggle - change the show/hide of the element*
*@function*
*@param {string||HTMLElement} element*
*@return {HTMLElement}*
*TODO--later i will add speed to this api just like jquery*
http://code.jquery.com/jquery-1.4.js
*/
ZYC.dom.toggle = function(element){
        element = ZYC.dom.g(element);
	element.style.display = element.style.display=="none" ?"" : "none";
};
分享到:
评论

相关推荐

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

    综上所述,掌握JavaScript和jQuery中的元素隐藏显示和文本内容变化对于前端开发至关重要。这些基本技巧不仅可以增强用户体验,也是构建交互式网页的关键步骤。通过实践这些示例,开发者可以更好地理解和应用这些概念...

    js控制隐藏显示table特定列

    JavaScript 控制隐藏显示 TABLE 特定列 在 HTML 中,我们经常需要控制 TABLE 的显示和隐藏,特别是在数据表格中,需要根据用户的选择来显示或隐藏某些列。今天,我们将介绍使用 JavaScript 控制隐藏显示 TABLE 特定...

    onclick事件实现div的隐藏和显示

    打开这个文件,你可以看到一个实际运行的示例,并可以通过修改代码来进一步理解 `onclick` 事件和 `div` 隐藏显示的机制。此外,也可以学习如何利用浏览器的开发者工具进行实时查看和调试,这对于提升网页开发技能...

    css3实现多个元素依次显示效果

    因此,在动画开始前,文章建议给元素添加一个class,如aninode,初始时设置为visibility:hidden(隐藏状态但占用空间),当需要元素显示时,再通过JavaScript给元素添加animated类来触发动画效果,并通过CSS设置该类...

    点击显示指定元素隐藏其他同辈元素的方法

    在网页设计和开发中,有时我们需要实现一种交互效果:当用户点击某个元素时,只显示该元素,并隐藏页面上与其相关的其他同辈元素。这样的功能常用于导航菜单、选项卡切换等场景,使得用户能够专注于当前选择的内容。...

    VC++ 显示隐藏窗体中的指定控件

    本篇文章将详细探讨如何在VC++中显示隐藏的窗体以及指定控件。 首先,理解窗体和控件的基本概念。窗体是应用程序的可视化窗口,而控件则是放在窗体上用于与用户交互的元素,如按钮、文本框、标签等。在MFC...

    单按钮实现指定图片的显示和隐藏切换.docx

    在Excel VBA编程中,有时候我们需要实现一些交互式的功能,比如通过单个按钮来控制工作表中的特定元素的显示和隐藏。在这个例子中,我们关注的是如何使用VBA来实现一个按钮,使得点击该按钮可以切换指定图片的显示和...

    JQ 隐藏和显示

    `hide()`方法允许我们快速地隐藏指定的DOM元素,而`show()`方法则用于重新显示之前隐藏的元素。这两个方法都接受一个可选的参数,用来指定动画效果的时长,例如: ```javascript $("#element").hide(500); // 隐藏...

    按钮显示和隐藏

    ### 按钮显示和隐藏知识点详解 #### 一、知识点概述 在Web开发中,按钮的显示与隐藏是常见的交互需求之一。本知识点主要围绕一个具体的HTML示例来讲解如何通过JavaScript实现按钮的显示与隐藏功能。示例代码通过...

    通过display或visibility来实现HTML元素的显示与隐藏

    它可以指定元素是如何展示的,比如内联、块级等。display有多种不同的值,其中涉及显示与隐藏的主要是"none"和"block"。当设置display为"none"时,元素不会显示在页面上,也不会占据其在文档流中的位置;而设置为...

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

    当触发器被点击时,display()函数将被执行,从而改变指定元素的显示状态。 JavaScript函数display()接收一个参数y,该参数代表了要操作的HTML元素的id。函数首先通过调用函数$()来获取对应的DOM元素,然后根据当前...

    精美的div隐藏与显示

    这些方法都接受一个可选的参数,用于指定动画的持续时间(以毫秒为单位),例如`$(selector).slideUp(500)`会让元素在500毫秒内完成滑动隐藏。 接下来是淡入淡出效果,这通常使用`.fadeIn()`、`.fadeOut()`和`....

    VB 动态显示、隐藏窗体的标题栏 VB在运行状态动态显示、隐藏窗体的标题栏,勾选复选框将隐藏、取消则显示,虽然此功能实用性不大,这里主要是想让大家了解VB对窗体元素的操作,比如窗口句柄、获得窗口哪方面的特征、指示要设置窗口哪方面特征、如何表示窗口信息的一个Long类型数值等。

    3. **API函数`ShowWindow`**:这个函数用于改变指定窗口的显示状态。它接受两个参数,第一个是窗口句柄,第二个是一个整数值,指示窗口应该如何显示。例如,`SW_HIDE`(0)用于隐藏窗口,`SW_SHOW`(5)用于显示窗口...

    javascript 隐藏/显示指定的区域附HTML元素【legend】用法

    `el` 参数用于指定需要隐藏或显示的元素的 ID,而 `el2` 参数则是用于触发该操作的按钮的 ID。函数通过 `document.getElementById()` 获取这两个元素,然后检查被选区域(`whichEl`)的 `display` 样式属性。如果 `...

    javaScript隐藏菜单与显示

    3. **切换显示状态**:在`toggleMenu`函数中,我们通过改变菜单元素的CSS属性来实现隐藏和显示。最常见的方法是使用`style.display`属性,其值可以是"none"(隐藏)或"block"(显示)。例如: ```javascript ...

    VB程序 隐藏、显示开始按钮

    在VB(Visual Basic)编程环境中,我们可以利用API(应用程序接口)函数来操作Windows系统的功能,例如隐藏或显示开始按钮。这种技术通常适用于开发系统级别的工具或者定制化用户界面。下面将详细讲解如何通过VB实现...

    JQ 内容的显示与隐藏

    如果元素原本就是可见的,调用`.hide()` 将立即或经过指定时间后将其隐藏。 3. `.toggle()`: 此方法非常灵活,可以在元素之间切换显示和隐藏状态。首次调用时,它会显示元素,再次调用则隐藏元素。同样,可以设置...

    C#隐藏、显示任务栏

    `FindWindow`函数用于查找指定类名或窗口标题的窗口,而`ShowWindow`函数则用来改变窗口的显示状态。 1. `FindWindow`函数的使用: ```csharp [DllImport("user32.dll")] static extern IntPtr FindWindow...

    elementUI滚动条,点击dom元素滚动到指定位置.pdf

    ElementUI 的滚动条组件是用来处理大型数据列表滚动的,它可以自动管理滚动条的显示和隐藏,并提供了许多实用的配置选项来满足不同的需求。在这个例子中,我们使用 ElementUI 的 `el-scrollbar` 组件来实现滚动条的...

    鼠标经过显示隐藏div

    - **`showTip2()`**:当鼠标移动到指定元素上方时,此函数被调用。其主要功能是获取`ipadTwo`元素,并设置其`display`属性为`block`,使其可见。同时根据鼠标的当前位置调整`ipadTwo`的位置,以确保其正确显示。 `...

Global site tag (gtag.js) - Google Analytics