<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>控制div属性</title>
<style>
#outer{width:500px;margin:0 auto;padding:0;text-align:center;}
#div1{width:100px;height:100px;background:black;margin:10px auto;display:block;}
</style>
<script>
var changeStyle = function (elem, attr, value)
{
elem.style[attr] = value
};
window.onload = function ()
{
var oBtn = document.getElementsByTagName("input");
var oDiv = document.getElementById("div1");
var oAtt = ["width","height","background","display","display"];
var oVal = ["200px","200px","red","none","block"];
for (var i = 0; i < oBtn.length; i++)
{
oBtn[i].index = i;
oBtn[i].onclick = function ()
{
this.index == oBtn.length - 1 && (oDiv.removeAttribute("style"));
changeStyle(oDiv, oAtt[this.index], oVal[this.index])
}
}
};
</script>
</head>
<body>
<div id="outer">
<input type="button" value="变宽" />
<input type="button" value="变高" />
<input type="button" value="变色" />
<input type="button" value="隐藏" />
<input type="button" value="重置" />
<div id="div1"></div>
</div>
</body>
</html>
js 实例学习第一部分（1）
分享到：
相关推荐
6. 图片和多媒体处理：使用CSS可以控制div内的图片大小、对齐方式，甚至创建响应式的图片展示。 7. 清除浮动：由于浮动元素可能导致父元素高度塌陷，实例可能包含如何正确清理浮动，以保持正常布局的方法。 8. ...
CSS+DIV布局实例是学习网页布局时不可或缺的一部分，它能够帮助开发者掌握如何有效地利用CSS控制网页元素的布局和样式，实现灵活多变的设计效果。 CSS是一种样式表语言，用于定义HTML或XML（包括如SVG、MathML等...
3. **CSS布局技术**：在本实例中，你会看到如何使用CSS控制div元素的布局，包括盒模型（Box Model）、浮动（Floats）、定位（Positioning）以及Flexbox和Grid等现代布局系统。 - **盒模型**：每个HTML元素都可以视...
1. 布局控制：通过设置div的`width`、`height`、`margin`和`padding`属性，可以调整元素的大小和位置，实现网格布局、流式布局、盒模型布局等多种布局模式。 2. 定位：使用`position`属性（如`static`、`relative`、...
通过深入学习 Czou.FloatDiv 源码，开发者不仅可以掌握一个具体实例的实现，还能提升自己在前端开发、用户交互设计方面的技能。源码阅读和实践是提升编程能力的重要途径，尤其是对于理解复杂功能的实现原理、优化...
本实例将探讨如何通过JavaScript实现一个简单的`div`层移动效果，这在交互式网页设计中非常常见，可以增强用户体验。我们将主要讨论以下几个知识点： 1. **HTML基础知识**：`div`元素是HTML中的一个块级元素，它...
在`2c-hd-ft-fixed`的实例中，我们通常会创建三个主要的`DIV`：一个用于头部（hd），一个用于主要内容（content），另一个用于底部（ft）。以下是基本实现步骤： 1. **创建结构**：在HTML中，为每个部分创建对应的`...
style.display 属性用于控制元素是否显示，并且它还影响文档流的布局。当设置 style.display = "none" 时，元素将被隐藏，并且它在文档流中的位置也将被占据，其中后续的元素将填补其位置。这种方式可以使得元素完全...
在IT领域，CSS（Cascading Style Sheets）与DIV元素是网页设计中不可或缺的一部分，尤其对于初学者来说，掌握这两者的基本概念和用法至关重要。本教程“CSS+DIV入门实例”旨在帮助初学者理解并运用CSS和DIV进行网页...
2. **CSS样式动态修改**：`div`的移动可以通过改变`style.left`和`style.top`属性实现，这两个属性分别控制元素在页面上的水平和垂直位置。值可以是像素或其他长度单位。例如，`element.style.left = '50px'`会让...
1. **基础概念**：理解Div元素的基本属性和用法，包括display属性（block、inline-block、flex等）、width、height、margin、padding等，以及如何通过CSS选择器（如类选择器、ID选择器、伪类等）来定位和操作Div元素...
`controller`属性允许定义一个控制器函数，它在指令的上下文中可用，可以与其他指令或父控制器进行交互。 5. **不同类型的指令使用** - **元素（E）**：如`<unordered-list>`，创建一个新元素。 - **属性（A）**...
1. **基础布局概念**：了解Div如何作为容器元素，以及如何通过CSS控制其宽高、内外边距、浮动和定位等属性，实现常见的如居中、对齐、多列布局等。 2. **盒模型理解**：理解CSS盒模型，包括内容(content)、内边距...
CSS+Div技术则是将这两者结合起来，通过CSS控制div元素的样式和布局，实现灵活、复杂的网页设计。这个“CSS+Div教程实例”提供了全面的学习资源，包含20个章节，旨在帮助初学者深入理解并掌握这一技术。 一、CSS...
在网页设计领域，`DIV+CSS`是一种广泛使用的布局技术，它通过定义不同的CSS样式来控制HTML中的`<div>`元素，实现网页的结构化和美化。本教程集包含多个经典实例，旨在帮助初学者快速掌握这一技术。下面将详细阐述`...
例如，使用display属性可以轻松地控制div的显示和隐藏：display:block表示显示，而display:none表示隐藏。 三、Ajax控制Div显示 要使用Ajax来控制div的显示，首先需要在JavaScript中创建一个Ajax请求。在接收到...
1. 浮动布局：早期的`CSS+DIV`布局常使用`float`属性，让元素在容器中浮动，实现左右排列或自适应布局。 2. 盒模型：理解盒模型是布局的关键，它包括元素的内容、内边距、边框和外边距，影响元素的总尺寸。 3. 定位...
在CSS中，`div`通常作为样式应用的对象，可以通过设置宽高、边距、内边距、背景色、边框等属性来控制其外观和位置。 1. **CSS选择器**：实例中会涵盖类选择器、ID选择器、元素选择器、后代选择器、子元素选择器等...
这个名为"各种各样的css+div经典实例"的压缩包文件，显然是一个包含多种CSS和div应用的示例集合，旨在帮助学习者理解和掌握这两者在实际中的综合运用。以下是对这些知识点的详细说明： 1. CSS基础： - 选择器：CSS...