DIV常见任务(上) —常规任务(显示滚动条/隐藏div/禁止事件冒泡等等)

当前位置 : 首页 > 网页制作 > 心得技巧 > DIV常见任务(上) —常规任务(显示滚动条/隐藏div/禁止事件冒泡等等)

DIV常见任务(上) —常规任务(显示滚动条/隐藏div/禁止事件冒泡等等)

来源:互联网 作者:脚本宝典 时间:2015-09-04 15:21
作为最常用的布局元素,DIV在Web开发中起着至关重要的作用。这里总结一下我在使用DIV中遇到的各种操作。 1.div显示滚动条 这个是很常见的一个任务了,基本是通过CSS去实现滚动条。

作为最常用的布局元素,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{/*滚动条的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).第一行相对来说不够直观,我们还可以在需换行的地方添加&#10;(&为半角)或&#13;来实现: 

复制代码

代码如下:


<ahref=#"title="说明一&#10;说明二&#10;说明三">建站学</a> 
<ahref=#"title="说明一&#13;说明二&#13;说明三">建站学</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> 


Tag:
网友评论

<