10-2110-2110-2110-2110-2110-2110-2110-2110-2110-21最新范文01-0101-0101-0101-0101-0101-0101-0101-0101-0101-0101-0101-0101-0101-0101-01js如何获取div（ul li）离屏幕上下左右边距离（长度）-亮术网
js如何获取div（ul li）离屏幕上下左右边距离（长度）
　　在网页中移到元素div（或 ul li），常常需要获取元素div离屏幕上下左右的距离，这样可以知道元素处在屏幕中的位置，以控制元素的移动。
　　获取元素div的长度或高度，可以用 js 获取元素div的width或height属性得到，但元素没有距离屏幕上下左右的属性，应该如何获取元素div（ul li）离屏幕上下左右边距离（长度）？javascript 有一个用 getBoundingClientRect()方法，这个方法有上下左右四个属性，它们正是离幕上下左右边距离，通过它可以获取到div（ul li）离屏幕上下左右边距离。
　　js如何获取div（ul li）离屏幕上下左右边距离（长度）实例
　　html代码：
　　&div id=&divId& class=&div&&js如何获取div（ul li）离屏幕上下左右边距离（长度）&/div&
　　CSS代码：
　　.div{ margin:80px 0px; position:relative; border:1px solid #787878; width:500px; height:30px; line-height:30px;}
　　javascript代码：
　　&script type=&text/javascript&&
　　　function getDivTopLength(obj) {
　　　　var div = document.getElementById(obj);
　　　　var topLength = div.getBoundingClientRect(). //div离屏幕上边距离（长度）
　　　　var bottomLength = div.getBoundingClientRect(). //div离屏幕下边距离（长度）
　　　　var leftLength = div.getBoundingClientRect(). //div离屏幕左边距离（长度）
　　　　var rightLength = div.getBoundingClientRect(). //div离屏幕右边距离（长度）
　　　　return &topLength=& + topLength + &；bottomLength=& + bottomLength + &；leftLength=& + leftLength + &；rightLength=& + rightL
　　　document.write(getDivTopLength(&divId&));
　　&/script&
　　输出结果：topLength=80；bottomLength=112；leftLength=8；rightLength=510
　　由于CSS把 div 的位置定义为相对（position:relative），所以 div 在网页中的位置不同，输出结果不一样。
　　以上举例了求 div 离屏幕上下左右边距离，js getDivTopLength方法把要求元素离屏幕上下左右边距离定义为参数，所以只要把具体元素传递给它就能求出其离屏幕上下左右边距离，因此求 ul li 离屏幕上下左右边距离，只需把相应的 id 传给 getDivTopLength方法就可以求出。sponsored links
html通用导航条制作
第一步：先创建一个盒子，定义类为 nav，width 1，height 40px，防京东的导航，与浏览器顶部100px，margin-top:100px,看的更直观
第二步：使用无序列表放置，导航条的内容，这个可以自己定，这里设定 ul 宽1高 40px；因为ul是块状元素，出现下面的样子，可以思考块状元素在firefox中和 ie6下面有什么不同。
通常在写样式的时候，要初始化我们的css样式表，这里具体用到哪些，初始哪些，具体设置 list-style:&margin:0;padding:0;
第三步：现在所有的栏目都是紧挨着，我们要给li设置宽度为100px，通过float:left&将他们分开，给li加一个&背景色blue，知道我们所处的位置，更好的去调节我们的页面，现在暂不去掉背景色，给&li&添加高度&height:40使用&line-height:40&垂直居中，text-align:&水平居中。&效果如右
第四步：为了体现这一步遇到的问题，我把最后一个栏目多加了几个字，&可以看出栏目之间的距离是不同的，为了寻找问题，我们给 li&设置一个宽度为 1px的&右外边距,&margin-right:1&&这个时候就很清楚的发现问题了，由于给li设定了宽度，所以当文字多了以后，不能够自动伸缩适应，这时候就要去掉宽度。&这个时候，宽度能够伸缩适应了，但是文字的空间太少，影响视觉，解决办法，添加所有内边距10px，给li&样式添加&padding:0 10&现在效果好多了，然后把 margin-right:1px 去掉
第五步：&因为导航是需要点击的，我们需要放置&超链接（a标签），放在哪里呢，放在li标签内，操作如下，给li添加a标签，设置文字大小12px，规定鼠标移上去和移出的效果。
第六步：如果希望鼠标移动上去显示&黑红色，给a&链接添加一个背景，以便看书a链接的区域。这里给a链接添加&黑色；，然后你发现，当你的鼠标移动到a标签后会出现小手的状态，为了用户体验，我们可以给&a&标签设置一个高度，让我们鼠标刚&接触li&标签就出现小手，添加height后，不管怎么刷新都不会出现，还是原来的样子，引发思考。因为&a&标签&是&内链元素，内链元素是无法设置宽度和高度的，我们需要使用 display:&将内链元素转换为块元素。这个时候会出现两种情况
，实际效果总是与期望效果不同，这个需要常年累积和对不同浏览器支持的了解。IE6&下面，认为a&标签既然转换为块元素，就要有块元素的特性，独占一行，再加上也没有对a标签的宽度设定，为什么firefox中没有这样呢，那时因为firefox&认为a标签即便是&块元素，也要受到它外面的li标签的影响。如何解决呢，因为现在a标签是块状元素了，所以给a标签添加&float:&即可。&现在两个浏览器显示的内容一样了
第七步：当我们鼠标移动到栏目上时，就会变成小手的形状，因为小手的形状是因为有a标签，但是我们发现a标签的宽度有点小，所以这里需要加宽a标签，这里使用&padding:0 10&因为之前有给&li&添加padding:0 10&为了能够更清晰的控制导航栏目的宽度，这里我们使用a标签来控制，去掉li&的padding。最后去掉a标签的背景，导航栏完成，兼容IE&以及常用浏览器哦。。。
最后的结果
这个导航可以延伸到不同的导航中，基本都差不多。重要的是，了解到一些元素在火狐和ie中的区别，更好的避免所谓的兼容性
最后&去除外面的div&后，&还是可以兼容浏览器的，很爽啊，上代码
&style type="text/css"&
body,div,ul,li{padding:0margin:0}
ul{list-style:}
ul{width:1margin:0background: #e64346;height:40margin-top: 100}
ul li{float:height: 40line-height: 40text-align:}
ul li a{font-size: 12text-decoration:height:40display:float:padding:0 10text-decoration:color:#}
ul li a:hover{background:
&li&&a href=""&首页&/a&&/li&
&li&&a href=""&服装城你好&/a&&/li&
&li&&a href=""&食品&/a&&/li&
&li&&a href=""&团购&/a&&/li&
&li&&a href=""&夺宝岛集团&/a&&/li&
导航条之所以放在第九步讲,是因为导航条制作是本教程中最难的部分,自然也是技术含量最高的地方.导航条的制作可易可难,但这里介绍的相对较难,您能坚持到这一步已经很不易,如果你只是有个导航条就满足的话,请参看第八步的副导航条的制作. 先去掉导航条的红色背景,还有就是移除html文件中main-nav层的&class=&hidden&quot ...
&!DOCTYPE html& &html& &head& &title&通用导航条&/title& &style type='text/css'& body,div,ul,li{margin:0; padding:0;font-style:font:12px/22px
导航条菜单,即左图所示.下面,将一一展开如何制作.
1.首先,制作一个垂直的项目菜单,用&ul&&li&标签写出基本内容,然后在样式表里面用margin和padding去掉内外边距,用list-style属性去掉原有的项目符号,插入自己喜欢的项目符号,代码如下: &!DOCTYPE html PUBLIC &-// ...
点击这里查看效果:/keleyi/phtml/divcss/17.htm效果图:以下是源代码: 1 &!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN& &http://www.w3.org/TR/xhtml1/DTD ...
今天制作了一个响应式导航条,能够自动随着不同的屏幕分辨率或浏览器窗口大小的不同而改变导航条的样式,这里主要用到的就是CSS3的Media Query.具体可以查看浅谈响应式布局这篇文章,这里就不花费大量的篇幅介绍了,主要看一下这个导航条该怎么做. 另外需要提到的是,ie6-ie8是不支持CSS3的Media Query的,因此对于ie6-ie8我们需要特殊处 ...导航下拉菜单被遮住或显示不全问题所在和解决办法
导航下拉菜单被遮住或显示不全问题所在和解决办法
导航下拉菜单被banner遮住/显示不全，这种问题是老生常谈了，经常有新手会问，有些人做了2、3年的还会经常犯错，而且好多人还以为是js问题，其实这是基本的css知识。我觉得还是有必要写一遍文章解释给新手们。
一、导航下拉菜单被遮住，那是因为层叠关系错误
我们必须理解层叠关系满足的2个条件：
1、必须是同级；
2、二者分别设定了position:relative 或 absolute 或 fixed；
这时候通过设置z-index才有效
看看我们比较常见的网页布局：
&!-- 头部 --&
&div class=&header&&
&div class=&nav&&
&ul class=&mNav&&
这是下拉菜单
&!-- banner --&
&div class=&banner&&
&div class=&slider&&这是焦点图....&/div&
.header{ }
.header .nav{ z-index:9999; height:50 color:# text-align:
.banner{ position: margin:10 height:300 }
上面css里吧nav的z-index设置成9999，但发现下拉还是被挡住，这是因为此时banner设置了position,会在nav上面。
想要nav在banner上面，就需要向上查找，发现nav的外层(header)和banner在同一级（满足条件1），
这时候同时设置header和banner的position和z-index，使header在banner上面即可，此时nav的z-index已经无关重要了。
.header{ position: z-index:1 }
.header .nav{
height:50 color:# text-align: }
.banner{ position: z-index:0; margin:10 height:300 }
如果你的html结构这样的：
&div class=&header&&
&div class=&nav&&
&ul class=&mNav&&
这是下拉菜单
&!-- content --&
&div class=&content&&
&div class=&banner&&
&div class=&slider&&这是焦点图....&/div&
那么分别设置header和content的position和z-index，因为2者在最外层并且同级。
其它同理。
二、导航下拉菜单显示不全是因为外层设置了overflow:hidden
很多时因为网页比较复杂，层级比较多，所以经常忽略了外层或者外外外层设置了overflow:hidden导致导航下拉菜单显示不全，其实只要仔细查找就能解决问题，把overflow:hidden去掉，如果需要清除浮动，可以用其它方法，百度css清除浮动就有了。
此条目发表在
分类目录。将加入收藏夹。}