在引入Jquery 1.6(+)的情况下,动态设置div隐藏显示的小案例
html代码:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title> New Document </title> <meta name="Generator" content="EditPlus"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <!--引入jquery文件--> <script src="../jquery-1.6.4.js"></script> </head> <body> <div id="myDiv" title="wode" style="width:100px;height:100px;background:red;" ></div> <input type="button" id="hiddenBtn" value="hidden" > <input type="button" id="showBtn" value="show" > </body> </html>
相应的js代码:
<script> $(document).ready(function(){ $("#hiddenBtn").click(function(){ //方式1:原生态html dom方式 //document.getElementById("myDiv").style.display="none"; //方式2:通过css样式 //$("#myDiv").css({display:"none",background:"blue"}); //方式3:通过jquery api方法hide() //$("#myDiv").hide(); //方式4:通过设置attr $("#myDiv").attr("style","display:none");//将会丢失style的其他的值,显示的时候需要重新设置原有样式,不好用。 //方式5:通过设置prop(有问题,通过测试$("#myDiv").prop("style")返回的是CSSStyleDeclaration对象) //$("#myDiv").prop("style","display:none") //无效,暂时不知怎么解决。 }); $("#showBtn").click(function(){ //方式1:原生态html dom方式 document.getElementById("myDiv").style.display="block"; //方式2:通过设置css样式 //$("#myDiv").css({display:"block",background:"blue"}); //方式3:通过jquery api方法hide() //$("#myDiv").hide(); //方式4:通过设置attr $("#myDiv").attr("style","display:block;width:100px;height:100px;background:red"); //方式5:通过设置prop //$("#myDiv").prop("style","display:block") //将返回CSSStyleDeclaration,暂时无效 }); }); </script>
其中比较完全可行的是前三种方式;
而通过attr设置style属性时,将会丢失原有的样式,因此不大好用,而通过prop方式设置style则返回的东西视乎不是我们想要的,暂时舍弃,推荐使用前三种方式。
在使用jquery1.6(+)是对于标签的固有属性最好使用prop方式:
因为标签可以自定义属性,我获取自定义属性的时候,采用attr方式。
如:<a href="a.html" title="aaa" />
当需要取 href属性时,采用$("a").prop("href");
当取自定义属性title时 ,采用 $("a").attr("title");
对于属性值为true和false的,如checkbox , select ,标签用prop,用attr返回的未必是需要的值。
相关推荐
"动态打开和关闭层"则是关于如何在用户操作后即时显示或隐藏div内容,例如点击按钮时显示一个通知,过一段时间自动关闭。JavaScript在这里扮演了关键角色,通过添加和移除class,或者直接改变元素的display属性,...
《Div+CSS网站布局案例精粹(第2版)》是一本深入讲解网站布局技术的专业书籍,主要聚焦于使用Div和CSS进行网页设计与布局。Div元素是HTML中用于组合其他元素的容器,而CSS(层叠样式表)则负责控制网页的样式、布局...
在div轮播图中,CSS将用于定义轮播图容器的外观,包括宽度、高度、边框、内边距等,以及轮播图元素(如表格行或单元格)的过渡效果、定位和隐藏/显示状态。 3. **jQuery库**(jquery-1.11.3.min.js):jQuery简化了...
在网页设计中,开发者通常通过CSS(Cascading Style Sheets)来设置`DIV`的样式,构建页面结构。`DIV`的灵活性使其成为创建复杂网页布局的基础,而在这个案例中,`DIV`被用来作为每一页的内容容器。 JavaScript(JS...
创建一个隐藏的 div,作为弹出窗口的基础。例如,我们可以创建一个 id 为 "popup" 的 div,初始设置其 display 属性为 "none",以使其默认不可见: ```html <div id="popup" style="display: none;"> 弹出窗口标题...
- `#fd` 定义了要显示或隐藏的 `div` 的基本样式,包括宽度、高度、背景色等,并且设置了 `overflow: hidden` 和 `position: absolute` 以实现动画效果。 - `.content` 类则为内部实际内容定义了一些基本样式。 ###...
1. 布局控制:通过设置div的`width`、`height`、`margin`和`padding`属性,可以调整元素的大小和位置,实现网格布局、流式布局、盒模型布局等多种布局模式。 2. 定位:使用`position`属性(如`static`、`relative`、...
### DIV滚动条设置添加 CSS滚动条显示与滚动条隐藏 #### 概述 在Web开发过程中,滚动条的样式和行为对于提升用户体验至关重要。通过CSS(层叠样式表),开发者可以自定义滚动条的外观、行为以及是否显示或隐藏。本...
CSS用于定义`DIV`的样式,包括初始的隐藏状态和动画效果,而JavaScript则负责控制`DIV`的显示和隐藏逻辑。 在这个案例中,`index.html`文件可能包含了一个HTML结构,其中有一个`DIV`元素作为弹出层。这个`DIV`可能...
关于隐藏内容的方法,主要内容提到了以下几点: 1. **display:none;** - 这是最常用的隐藏方式,它会完全移除元素及其内容,不仅在视觉上不可见,而且在页面布局中也不占据任何空间。这种方法适用于隐藏任何类型的...
当我们希望div在溢出时自动换行,而不是隐藏或显示滚动条,可以采用以下方法: - `display: flex`:使用弹性布局,通过设置`flex-wrap: wrap`可以让子元素在必要时换行。 - `white-space: nowrap` 和 `white-...
本案例讲述 1设置单样式 2 设置多样式 3 淡入淡出切换 4切换向上/向下slideDown/Up 5显示/隐藏show/hide 6 增加类 删除类 切换类 $('button').eq(1).click(function () { $('div').css({ width: 500, color: '...
在切换`div`时,可能需要修改某个`div`的`class`以显示或隐藏,或者调整其在容器中的位置。 6. **动画效果**:为了使切换更流畅,通常会使用CSS的`transition`或JavaScript的动画库(如jQuery的`animate`方法)来...
在`点击关闭div`的示例中,CSS可能用来设置div的显示效果,如位置、大小、颜色等,并可能对关闭按钮进行特定样式处理,使其更易于用户识别: ```css #closeable-div { position: absolute; top: 50px; right: 50...
在网页设计中,"可折叠DIV块"是一种常见的交互元素,它允许用户隐藏或显示特定内容,从而提高页面的可读性和用户体验。这种技术主要基于HTML、CSS和JavaScript(通常是jQuery库)实现。下面我们将详细探讨如何创建一...
在这个案例中,按钮的功能是显示或隐藏 `div`。 2. **JavaScript(可能涉及jQuery)**:实现这个功能通常需要JavaScript,因为HTML和CSS本身不具备动态显示/隐藏元素或添加拖动功能的能力。JavaScript或者流行的库...
"DIV懒加载demo"是一个关于如何实现非图片元素(如div)的懒加载技术实例,它模仿了天猫和京东等电商平台的滚动加载效果。这个示例旨在帮助开发者优化网页性能,特别是对于数据量大、内容丰富的页面。 首先,我们要...
本案例中,我们探讨的是使用div和CSS技术来创建一个淡蓝色风格的折叠菜单。下面将详细介绍如何实现这样的效果。 首先,我们需要了解div元素。在HTML中,div是一个通用容器,用于组合其他HTML元素,它可以对内容进行...
DIV+CSS布局是现代网页设计的常见方法,通过设置div的属性,如width、height、margin、padding等,可以实现灵活多样的网页布局。 在CSS中,选择器是定位HTML元素的关键。常见的选择器有ID选择器(#id)、类选择器...