javascript实现div的显示和隐藏
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>oec2003</title>
<script language="JavaScript" type="text/JavaScript">
<!--
function toggle(targetid){
if (document.getElementById){
target=document.getElementById(targetid);
if (target.style.display=="block"){
target.style.display="none";
} else {
target.style.display="block";
}
}
}
-->
</script>
<style type="text/css">
<!--
#div1{
background-color:#000000;
height:400px;
width:400px;
display:none;
}
-->
</style>
</head>
<body>
<input type="button" id="butn" value="显示/隐藏" onclick="toggle('div1')" />
<center>
<div id="div1"></div></center>
居中的DIV
</body>
</html>
转载于http://www.cnblogs.com/oec2003/archive/2007/05/05/736492.html
分享到：
相关推荐
- `box-sizing: border-box`使得元素的宽度和高度包含边框和内边距，通过改变尺寸实现隐藏和显示。 这些方法在不同场景下各有优缺点，选择哪种方式取决于具体需求，例如是否需要保留元素空间、是否涉及动画效果等...
隐藏和显示 `div` 可以通过改变其 `style.display` 属性来实现。当 `display` 属性值为 `"none"` 时，元素将不占据任何空间，看起来像是隐藏了；而当其值为 `"block"`（默认值）或其他非 `"none"` 值时，元素会正常...
本主题聚焦于使用JavaScript实现div对话框效果，这是一种常见的交互设计，常用于提示信息、用户确认操作或者展示详细内容。对话框通常具有可定制的标题、内容、按钮以及可选的黑背景，以确保用户的注意力集中在...
总结起来，JS结合CSS提供了丰富的可能性来实现div的动态显示隐藏效果。通过巧妙地控制时间和动画曲线，可以创建出各种吸引人的用户界面。实践中，还可以结合CSS3的`animation`属性和JS的事件监听来实现更复杂的交互...
本文将详细讨论如何使用JavaScript实现多div的显示和隐藏，以及如何创建简单的选项卡功能。 首先，让我们了解基本概念。Div是HTML中的一个块级元素，通常用于组织页面布局或内容。通过CSS，我们可以设置div的样式，...
在"Div显示与隐藏网页制作"这个主题中，我们将探讨如何利用`Div`实现网页元素的动态显示和隐藏，这对于创建交互式和响应式的网页至关重要。 在网页设计中，有时我们需要根据用户的行为或者特定条件来控制某些内容的...
本文将详细介绍如何通过CSS属性（如`visibility`和`display`）以及JavaScript来实现div的显示与隐藏功能。 #### 一、CSS中的visibility属性 `visibility`属性用于控制元素的可见性，主要分为以下几种状态： 1. **...
在这个特定的主题中，“纯CSS 鼠标经过DIV另一个显示隐藏 多个DIV并存”是指通过CSS实现的一种交互效果：当鼠标悬停在一个div上时，另一个关联的div会显示出来，同时其他无关的div保持隐藏状态。这种效果在创建导航...
总之，`div`的显示隐藏效果是前端开发中的基本技巧，它涉及到HTML、CSS和JavaScript的综合运用。掌握这一技能可以帮助开发者更好地控制网页的交互性和用户体验。通过不断学习和实践，你可以创造出更多富有创意的显示...
JavaScript是Web开发中不可或缺的一...总结起来，这个主题涵盖了JavaScript的基本DOM操作，特别是针对`<div>`元素的隐藏和显示，以及创建具有样式的弹出式窗口。理解这些概念对于任何Web开发者来说都是基础且重要的。
以上就是在使用jQuery和JavaScript实现div显示和隐藏操作中需要注意的各个知识点，包括使用jQuery库的`show()`和`hide()`方法，以及使用原生JavaScript操作元素的`visibility`和`display`属性来控制元素的显示和隐藏...
标题中的“javascript实现div的显示和隐藏的小例子”是指通过JavaScript来控制HTML中div元素的可见性，这是前端开发中常见的交互效果。JavaScript是一种广泛使用的客户端脚本语言，它允许在用户与网页交互时动态更新...
三、Ajax控制Div显示 要使用Ajax来控制div的显示，首先需要在JavaScript中创建一个Ajax请求。在接收到服务器响应后，根据返回的数据决定是否显示或隐藏特定的div。例如，服务器可能返回一个JSON对象，其中包含一个...
以上就是使用JavaScript实现缓动效果来控制div显示隐藏的基本原理和步骤。在实际开发中，你还可以结合CSS3的transition和animation属性，或者使用现有的库如jQuery或GSAP，以更高效、更简洁的方式实现类似效果。不过...
在JavaScript中，可以创建一个新的`<div>`作为弹出层，并设置其样式使其位于其他元素之上，通过CSS的`display`属性控制显示和隐藏。例如： ```javascript var dialog = document.getElementById('dialog'); dialog....
本文将深入探讨如何在ASP.NET中利用C#来实现DIV元素的显示与隐藏，并通过实际代码示例进行说明。 #### 一、为什么使用Panel而非DIV？ 在ASP.NET中，默认情况下并不支持直接操作HTML的`<div>`标签的可见性属性。这...
总的来说，`div` 显示隐藏是网页动态效果的基础，结合 CSS 的伪类和选择器，我们可以实现丰富的用户交互。通过熟练掌握这些技巧，开发者可以构建出更直观、更易用的网页界面。在实际项目中，还可以考虑使用 ...
下面是一个简单的例子，展示了如何使用JavaScript实现渐显和渐隐效果： ```javascript function fadeIn(element) { let opacity = 0; const id = setInterval(frame, 10); function frame() { if (opacity >= ...
在Web开发中，通过JavaScript（简称JS）和CSS结合可以实现很多动态效果，其中“鼠标经过显示隐藏div”就是一个非常实用的功能。本文将详细解析如何利用这些技术来实现一个响应鼠标事件、能够显示和隐藏特定元素（本...