在引入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简化了...
在本案例中，我们将主要关注 WXML 和 JS 文件的编写。 1. **创建自定义组件**： 在微信小程序中，我们可以创建自定义组件来封装复杂的交互逻辑。创建一个名为 `customDropdown` 的组件，包含一个显示下拉框的容器...
在网页设计中，开发者通常通过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元素，它可以对内容进行...