您现在的位置是：网站首页> 编程资料编程资料

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

2021-09-12 1132人已围观

简介 DIV在Web开发中起着至关重要的作用,这里总结一下我在使用DIV中遇到的各种操div显示滚动条/禁止div的事件冒泡/禁止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高度出现垂直的滚动条
所以我们想在需要的时候显示垂直的滚动条，可以这么实现：

复制代码
代码如下:

...


或者

复制代码
代码如下:

...


(2)水平滚动条
如果只想出现水平的滚动条，一般还要配合禁止换行的设置，例如：

复制代码
代码如下:



(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执行默认的行为
这个其实是一个普遍的问题，对于具有默认行为的元素，比如提交按钮的提交表单行为,，元素的超链接行为等，我们如果在这些元素上应用事件，同时也往往希望取消它们的默认行为，这个通过在事件的回调函数中调用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的嵌套结构

复制代码
代码如下:






当A的position为relative时，B的position为absolute才有效。这时候left:0、top:0就不再针对窗口文档，而是针对id为A的这个div了。但是如果你在A中的padding="50px"，在A中的其他没有设置postion为absolute的会随着A的padding的值而变化，但是B不会变的它的position是相对上一级的。
这里再稍微

上一篇：struts2跳转后css和js失效的问题解决思路及实现步骤_心得技巧_网页制作_

下一篇：DIV常见任务(下) —变身为编辑器及div的各种diy应用_心得技巧_网页制作_

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网