`
星夜的遐想
  • 浏览: 189383 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

关于设置div隐藏的小案例

阅读更多

在引入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做各式弹出窗口案例

    "动态打开和关闭层"则是关于如何在用户操作后即时显示或隐藏div内容,例如点击按钮时显示一个通知,过一段时间自动关闭。JavaScript在这里扮演了关键角色,通过添加和移除class,或者直接改变元素的display属性,...

    div+css网站布局案例精粹(第2版)30个书本案例代码2015

    《Div+CSS网站布局案例精粹(第2版)》是一本深入讲解网站布局技术的专业书籍,主要聚焦于使用Div和CSS进行网页设计与布局。Div元素是HTML中用于组合其他元素的容器,而CSS(层叠样式表)则负责控制网页的样式、布局...

    div轮播图代码案例..

    在div轮播图中,CSS将用于定义轮播图容器的外观,包括宽度、高度、边框、内边距等,以及轮播图元素(如表格行或单元格)的过渡效果、定位和隐藏/显示状态。 3. **jQuery库**(jquery-1.11.3.min.js):jQuery简化了...

    DIV+JS优化案例,非常酷的拖拽翻页效果.zip

    在网页设计中,开发者通常通过CSS(Cascading Style Sheets)来设置`DIV`的样式,构建页面结构。`DIV`的灵活性使其成为创建复杂网页布局的基础,而在这个案例中,`DIV`被用来作为每一页的内容容器。 JavaScript(JS...

    JavaScript +div 弹出窗案例

    创建一个隐藏的 div,作为弹出窗口的基础。例如,我们可以创建一个 id 为 "popup" 的 div,初始设置其 display 属性为 "none",以使其默认不可见: ```html &lt;div id="popup" style="display: none;"&gt; 弹出窗口标题...

    打开DIV

    - `#fd` 定义了要显示或隐藏的 `div` 的基本样式,包括宽度、高度、背景色等,并且设置了 `overflow: hidden` 和 `position: absolute` 以实现动画效果。 - `.content` 类则为内部实际内容定义了一些基本样式。 ###...

    css+div实例

    1. 布局控制:通过设置div的`width`、`height`、`margin`和`padding`属性,可以调整元素的大小和位置,实现网格布局、流式布局、盒模型布局等多种布局模式。 2. 定位:使用`position`属性(如`static`、`relative`、...

    DIV滚动条设置添加 CSS滚动条显示与滚动条隐藏.docx

    ### DIV滚动条设置添加 CSS滚动条显示与滚动条隐藏 #### 概述 在Web开发过程中,滚动条的样式和行为对于提升用户体验至关重要。通过CSS(层叠样式表),开发者可以自定义滚动条的外观、行为以及是否显示或隐藏。本...

    DIV弹出层+定位

    CSS用于定义`DIV`的样式,包括初始的隐藏状态和动画效果,而JavaScript则负责控制`DIV`的显示和隐藏逻辑。 在这个案例中,`index.html`文件可能包含了一个HTML结构,其中有一个`DIV`元素作为弹出层。这个`DIV`可能...

    divcss隐藏内容样式方法PPT学习教案.pptx

    关于隐藏内容的方法,主要内容提到了以下几点: 1. **display:none;** - 这是最常用的隐藏方式,它会完全移除元素及其内容,不仅在视觉上不可见,而且在页面布局中也不占据任何空间。这种方法适用于隐藏任何类型的...

    div嵌套的div溢出时换行

    当我们希望div在溢出时自动换行,而不是隐藏或显示滚动条,可以采用以下方法: - `display: flex`:使用弹性布局,通过设置`flex-wrap: wrap`可以让子元素在必要时换行。 - `white-space: nowrap` 和 `white-...

    本案例讲述 1设置单样式 2 设置多样式 3 淡入淡出切换 4切换向上/向下slideDown/Up 5显示/隐藏show/hi

    本案例讲述 1设置单样式 2 设置多样式 3 淡入淡出切换 4切换向上/向下slideDown/Up 5显示/隐藏show/hide 6 增加类 删除类 切换类 $('button').eq(1).click(function () { $('div').css({ width: 500, color: '...

    js控制div左右切换带左右箭头

    在切换`div`时,可能需要修改某个`div`的`class`以显示或隐藏,或者调整其在容器中的位置。 6. **动画效果**:为了使切换更流畅,通常会使用CSS的`transition`或JavaScript的动画库(如jQuery的`animate`方法)来...

    点击关闭div.rar

    在`点击关闭div`的示例中,CSS可能用来设置div的显示效果,如位置、大小、颜色等,并可能对关闭按钮进行特定样式处理,使其更易于用户识别: ```css #closeable-div { position: absolute; top: 50px; right: 50...

    可折叠DIV块

    在网页设计中,"可折叠DIV块"是一种常见的交互元素,它允许用户隐藏或显示特定内容,从而提高页面的可读性和用户体验。这种技术主要基于HTML、CSS和JavaScript(通常是jQuery库)实现。下面我们将详细探讨如何创建一...

    点击按钮弹出DIV,可以拖动,操作方便!

    在这个案例中,按钮的功能是显示或隐藏 `div`。 2. **JavaScript(可能涉及jQuery)**:实现这个功能通常需要JavaScript,因为HTML和CSS本身不具备动态显示/隐藏元素或添加拖动功能的能力。JavaScript或者流行的库...

    DIV懒加载demo

    "DIV懒加载demo"是一个关于如何实现非图片元素(如div)的懒加载技术实例,它模仿了天猫和京东等电商平台的滚动加载效果。这个示例旨在帮助开发者优化网页性能,特别是对于数据量大、内容丰富的页面。 首先,我们要...

    折叠菜单div+CSS

    本案例中,我们探讨的是使用div和CSS技术来创建一个淡蓝色风格的折叠菜单。下面将详细介绍如何实现这样的效果。 首先,我们需要了解div元素。在HTML中,div是一个通用容器,用于组合其他HTML元素,它可以对内容进行...

    简单的网页制作案例(DIV+CSS完成):网上书店.rar

    DIV+CSS布局是现代网页设计的常见方法,通过设置div的属性,如width、height、margin、padding等,可以实现灵活多样的网页布局。 在CSS中,选择器是定位HTML元素的关键。常见的选择器有ID选择器(#id)、类选择器...

Global site tag (gtag.js) - Google Analytics