今天小编跟大家讲解下有关DIV常见任务(上) ―常规任务(显示滚动条/隐藏div/禁止事件冒泡等等) ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关DIV常见任务(上) ―常规任务(显示滚动条/隐藏div/禁止事件冒泡等等) 的相关资料，希望小伙伴们看了有所帮助。
作为最常用的布局元素 DIV在Web开发中起着至关重要的作用。这里总结一下我在使用DIV中遇到的各种操作。 1.div显示滚动条 这个是很常见的一个任务了 基本是通过CSS去实现滚动条。 (1)垂直滚动条 设置是否显示滚动条主要是在CSS中设置下列的属性： 复制代码代码如下: overflow：visible|auto|hidden|scroll overflow-x：横向滚动条 overflow-y：纵向滚动条 参数的意义： visible: 不剪切内容也不添加滚动条。假如显式声明此默认值 对象将被剪切为包含对象的window或frame的大小。并且clip属性设置将失效。 auto: 此为body对象和textarea的默认值。在需要时剪切内容并添加滚动条 hidden: 不显示超过对象尺寸的内容 scroll: 总是显示滚动条 overflow:auto;这个表示当你内容超过div高度出现垂直的滚动条 所以我们想在需要的时候显示垂直的滚动条 可以这么实现： 复制代码代码如下: <divstyle="overflow:auto;">...</div> 或者 复制代码代码如下: <divstyle="overflow-y:auto;">...</div> (2)水平滚动条 如果只想出现水平的滚动条 一般还要配合禁止换行的设置 例如： 复制代码代码如下: <divstyle="overflow-x:auto;height:40px;width:100px;white-space:nowrap"></div> (3)滚动条的外观 在IE中 主要是使用各种颜色属性： 复制代码代码如下: scrollbar-3dlight-color:color;设置或检索滚动条亮边框颜色； scrollbar-highlight-color:color;设置或检索滚动条3D界面的亮边颜色； scrollbar-face-color:color;设置或检索滚动条3D表面的颜色； scrollbar-arrow-color:color;设置或检索滚动条方向箭头的颜色；当滚动条出现但不可用时 此属性失效； scrollbar-shadow-color:color;设置或检索滚动条3D界面的暗边颜色； scrollbar-darkshadow-color:color;设置或检索滚动条暗边框颜色； scrollbar-base-color:color;设置或检索滚动条基准颜色。其它界面颜色将据此自动调整。 scrollbar-track-color:color;设置或检索滚动条的拖动区域颜色 在Chrome中 基本上是使用webkit专用属性设置： 复制代码代码如下: ::-webkit-scrollbar-track-piece{ background-color:#fff; -webkit-border-radius:0; } ::-webkit-scrollbar{ width:8px; height:8px; } ::-webkit-scrollbar-thumb:vertical{ height:50px; background-color:#999; -webkit-border-radius:4px; outline:2pxsolid#fff; outline-offset:-2px; border:2pxsolid#fff; } ::-webkit-scrollbar-thumb:hover{ height:50px; background-color:#9f9f9f; -webkit-border-radius:4px; } ::-webkit-scrollbar-thumb:horizontal{ width:5px; background-color:#CCCCCC; -webkit-border-radius:6px; } 2.禁止div的事件冒泡 这个基本上都是使用标准的event.stopPropagation()方法阻止事件冒泡 当然IE除外： 复制代码代码如下: functionBigDiv(event){ if(event.stopPropagation){ event.stopPropagation();//在基于firefox内核的浏览器中支持做法stopPropagation }else{ event.cancelBubble=true;//基于ie的写法 } //othercodes... } 3.禁止div执行默认的行为 这个其实是一个普遍的问题 对于具有默认行为的元素 比如提交按钮的提交表单行为, <a>元素的超链接行为等 我们如果在这些元素上应用事件 同时也往往希望取消它们的默认行为 这个通过在事件的回调函数中调用event.preventDefault();实现。 4.动态计算div的位置(比如常见的计算div弹出层的位置) (1)DOM属性方式 offsetTop：当前对象到其上级层顶部的距离。不能对其进行赋值 设置对象到父对象顶部的距离需要使用style.top属性。 offsetLeft：当前对象到其上级层左边的距离.。不能对其进行赋值 设置对象到父对象左边的距离需要使用style.left属性。 这里要注意offsetTop与style.top的区别(offsetLeft与style.left也是一样的道理)： •offsetTop返回的是数字 而style.top返回的是字符串 除了数字外还带有单位：px 通常需要使用parseInt转换成数值。 •offsetTop只读 而style.top可读写。 •如果没有给HTML元素指定过top样式 则style.top返回的是空字符串。 注意：在FireFox中 给style.top赋值的时候 也要是字符串(带px)这种形式。 (2)CSS中position属性对位置的影响 position默认的属性值都是static 静态。但是position中最关键的属性值是relative（相对）以及absolute（绝对）。 往往我们会把absolute属性与left、top配合起来制作相关的“悬浮层”效果。然而有时候我们需要针对某一个容器的悬浮效果 而不是针对窗口的。这时候通过高度、宽度的计算不但麻烦 而且几乎无法完美实现效果。其实只要把其上一级的样式属性position设置为relative就可以了。也就是说 position的属性值的效果 直接受其容器样式中position属性值影响。例如如下A-B的嵌套结构 复制代码代码如下: <divid="A"> <divid="B"> </div> </div> 当A的position为relative时 B的position为absolute才有效。这时候left:0、top:0就不再针对窗口文档 而是针对id为A的这个div了。但是如果你在A中的padding="50px" 在A中的其他没有设置postion为absolute的会随着A的padding的值而变化 但是B不会变的它的position是相对上一级的。 这里再稍微乱幌position的四个属性值：relative absolute fixed static。还是以上面的代码为例： relative relative值意味着元素要根据它本身的位置进行相对的偏移。例如在上面的代码中 如果设定B设置了relative值 比如设置如下CSS代码： 复制代码代码如下: #B{ position:relative; padding:5px; top:5px; left:5px; } 我们可以这样理解 如果不设置relative属性 B的位置按照正常的文档流 它应该处于某个位置。但当设置B的position为relative后 将根据top right bottom left的值按照它理应所在的位置进行偏移 relative的“相对的”意思也正体现于此。 注意：relative的偏移是基于对象的margin的左上侧的。 absolute 这个属性总是有人给出误导。说当position属性设为absolute后 总是按照浏览器窗口来进行定位的 这其实是错误的。实际上 这是fixed属性的特点。 当B的position设置为absolute后 其到底以谁为对象进行偏移呢 这里分为两种情况： •当B的父对象(或曾祖父 只要是父级对象)parent也设置了position属性 且position的属性值为absolute或者relative时 也就是说 不是默认值的情况 此时B按照这个parent来进行定位。 •当B不存在一个有着position属性的父对象 那么那就会以body为定位对象 按照浏览器的窗口进行定位 这个比较容易理解。 fixed fixed是特殊的absolute 即fixed总是以body为定位对象的 按照浏览器的窗口进行定位。 static position的默认值 一般不设置position属性时 会按照正常的文档流进行排列。 (3)Jquery方式 提示类弹出框是常见的一种方式 这个任务最重要的是计算弹出框的位置。通过事件对象获取到事件源,然后可以使用offset()函数计算事件源相对于document的位置： 复制代码代码如下: vartop=$(event.target).offset().top; varleft=$(event.target).offset().left; 因为是相对于document 即页面左上角的位置 所以需要将弹出层放在Body元素中的第一层 即父类就是body。如果包含在其他元素中 需要确定任何一个父类的position样式设置为了relative。计算出来的top和left是事件源的位置 在此位置显示会将事件源对象遮盖住。所以通常需要手工做一些偏移 比如top+20。 5.隐藏div元素 css中隐藏元素可以有两种方式：display:none或者visibility:hidden。两种方式的不同之处在于设置display的值后元素完全隐藏 元素所占的位置也没有了 下面的元素上移。设置visibility后元素所占的位置还在 就是看不见。 6.div的子元素横排 竖排 使用float属性控制。div默认是竖排的 宽度是100% CSS中设置float:left以后就变成横排了。如果想从横排中间断开 后面的还原成竖排 则需要使用clear:both修改。看下面的例子： 复制代码代码如下: <div> <divstyle="float:left">aaaaaaaaaaaaaa</div> <divstyle="float:left">bbbbbbbbbbbbbb</div> 以上这两个div就是横向排列。 <divstyle="clear:both"></div>这个东西很重要 它清除上两个层的浮动 也就是说以下的层就继续垂直排列了。 <div>这个层就垂直排列了</div> <div>这个层就垂直排列了</div> </div> 上面只是float属性的一个简单应用。 float属性主要是用于控制元素的流向 也就是向右靠拢 还是向左靠拢。这里看一下float属性的语法： 复制代码代码如下: float:none|left|right none:默认值。对象不飘浮 left:文本流向对象的右边 right:文本流向对象的左边 为了达到某些效果 通常我们需要在某个时候取消浮动以免对别的对象造成影响 这是通过上面介绍过的那个clear属性实现的： clear属性有四个值： 复制代码代码如下: clear:both|left|right|none; 简单来说呢 clear属性的作用就是“清除”浮动。如果某元素设置clear:left;表示该元素左边不存在浮动元素；相应的 clear:right;表示该元素右边不存在浮动元素；clear:both;表示该元素两边都不存浮动元素。clear:none表示两边允许有浮动元素。 7.设置div中文字的字体 先看一下CSS中控制文本的属性列表： 复制代码代码如下: Word-spacing：定义了各个单词之间的间距 取值：Normal|<length>。 Letter-spacing：定义了每个字母之间的间距 取值：Normal|<length>。 Text-decoration：定义文字的“装饰”样式 取值范围：None|underline|overline|line-through|blink。 Vertical-align：定义了元素在垂直方向上的位置 取值：baseline|sub|super|top|text-top|middle|bottom|text-bottom|<percentage>。 text-transform：使文本转换为其它形式 取值：Capitalize|uppercase|lowercase|none。 Text-align：定义了文字的对齐方式 取值：Left|right|center|justify。 Text-indent：定义了文本的首行的缩进方式 取值：<length>|<percentage>。 Line-height：定义了文本的行高 取值：Normal|<number>|<length>|<percentage>。 我们可以从上面看到在这里可以定义文本的文字间距、字母间距、装饰、对齐方式、缩进方式和行高等属性。举个例子来看看吧： 复制代码代码如下: <pstyle="letter-spacing:5px;text-align:justify;text-indent:4em;line-height：17pt">我们看到经过文本属性处理的文本字与字之间多了间距 行与行之间多了行高 对齐方式变成了两端对齐 并且段首又多缩进了两格。</p> letter-spacing设置了字间距为5px 其中5px为一个长度单位；text-align设置了对齐方式为两端对齐；indent设置了缩进格为4em；line-height设置了行高为17pt。从上面的例子 我们可以看出利用CSS的文本属性可以方便的对页面中的文本进行排版。 行间距取决于字体的大小 一般来说 小的字号需要大一点的行间距来便于阅读 中文字体在网页上如果没有行间距的设定 对于阅读大段文字来说是读者的灾难 所以适当设定line-height是非常必要的。一般地 line-height在网页设计中应该是字体大小的1.5倍到2倍。Word和其它的文本编辑软件里 一般设定字体的120%作为缺省的行间距。css里的line-height设定 是均分后加在每一行的上下 也就是说 如果line-height设定为20px的话 那么每一行文字的上下各有10px的间距。 8.设置div的tooltip分行显示 在html种对于链接和图片 我们可以通过添加title属性以显示一些说明文字 一般情况下 这些文字都是显示成一行 那么有没有办法让它以多行的方式显示呢 解决的方法有两种： (1).将title属性分成几行来写 例如： 复制代码代码如下: <ahref=#"title="说明一 说明二 说明三">建站学</a> (2).第一行相对来说不够直观 我们还可以在需换行的地方添加 （&为半角)或 来实现： 复制代码代码如下: <ahref=#"title="说明一 说明二 说明三">建站学</a> <ahref=#"title="说明一 说明二 说明三">建站学</a> 9.鼠标中键控制水平滚动条 在Chrome和FireFox中 一般都是鼠标中键控制垂直滚动条 如果你的DIV只有水平控制条 默认情况下 鼠标中键是不起滚动作用的 这个时候需要自己实现。 首先 挂接鼠标滚轮事件： 复制代码代码如下: //MousewheeleventforNonFireFox element.onmousewheel=fireElementScrolled; //MousewheeleventforFireFox element.addEventListener('DOMMouseScroll',fireElementScrolled,false); 这里FireFox的特殊一点 需要使用addEventListener这种方式挂接。 然后 实现fireElementScrolled方法： 复制代码代码如下: fireElementScrolled=function(event){ varrolled=0; if(event.wheelDelta){ rolled=event.wheelDelta; } else{ //Firefox:需要处理一下下 rolled=-event.detail*30; } varhtmlElement=document.getElementById('test'); htmlElement.scrollLeft=htmlElement.scrollLeft-rolled; event.preventDefault(); returnfalse; }; 原理很简单 就是拿到滚轮滚动的距离 处理后给div元素的scrollLeft属性赋值即可。 10.子元素居中 (1)水平居中 普通的文字和图片居中很好办 设置父容器的CSS样式包含text-align:center;即可。 当子元素是DIV等元素的情况稍微复杂一点 以子元素为div为例 如果只有一个子div 则可以通过设置子元素的CSS样式包含margin:0auto;实现居中。例如下面的例子： 复制代码代码如下: <divid="a"style="width:400px;height:300px;border:1pxsolidgreen;"> <divid="b"style="margin:0auto;width:200px;border:1pxsolidblue;">简单的一个子DIV居中问题</div> </div> 如果含有多个子元素 我通常是多加一层div来实现 看例子： 复制代码代码如下: <divstyle="width:400px;height:300px;border:1pxsolidred;"> <divstyle="margin:0auto;position:relative;left:50%;float:left;"> <divstyle="position:relative;left:-50%;float:left"> <divstyle="border:1pxsolidblue;text-align:center;">1</div> <divstyle="border:1pxsolidblue;text-align:center;">2</div> <divstyle="border:1pxsolidblue;text-align:center;">3</div> <divstyle="border:1pxsolidblue;float:left;">4</div> <divstyle="border:1pxsolidblue;float:left;">5</div> <divstyle="border:1pxsolidblue;float:left;">6</div> </div> </div> </div> (2)垂直居中 垂直居中麻烦一点 有一种做法很简单 可以同时实现水平和垂直居中。首先给父元素写上positon:relative 这么做是为了给子元素打上position:absolute的时候不会被定位到外面去。接下去 写上子元素的height和width 某些浏览器在解析的时候如果没有这2个值的话会出现意想不到的错位。接着就是整个方法的核心 给子元素再打上top:50%;left:50%以及margin-top:一半的height值的的负数;margin-left:一半的weight值的负数。当然 这里父元素也要先写上width和height。看例子： 复制代码代码如下: <divstyle="width:600px;height:300px;position:absolute;top:50%;left:50%;margin-top:-150px;margin-left:-300px;border:1pxsolidred;">居中方法</div>来源：爱蒂网
