javascript 中如何获得div的边框。

来源：互联网发布：毛姆最好看的作品知乎编辑：程序博客网时间：2024/06/11 10:07

本文讲述的是如何在javascript中获得图片的边框。

我们有的时候载入一张图片，并且设置了边框，但是找图片上面的左边点，就必须通过margin的偏移来找到了，如何去找margin的偏移呢？

看下面的代码：

<html><head><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.js"></script><script>function setImage(obj){var image = new Image();image.src = obj.src;var height = image.width;var width  =  image.height;alert("pic-height= "+height+"pic-width="+width); var imageCorrdinate = [];imageCorrdinate = new Array();imageCorrdinate[0] = ($("div#").css("marginLeft"));imageCorrdinate[1] = ($("div").css("marginTop"));alert("marginLeft= "+imageCorrdinate[0]+"marginTop="+imageCorrdinate[1]);var left = $("#droppable").offset().left;var top = $("#droppable").offset().top;alert("left= "+left+"right="+top);var totalHeight = height + imageCorrdinate[1];var totalWidth = width + imageCorrdinate[0];alert("tatalheight= "+totalHeight+"totalwidth="+totalWidth);}</script></head><body><div id="droppable"><img src="1.jpg" onload="setImage(this);"></div><style>#droppable {width: 100%;height: 100%;float: left;margin-left: 10%;margin-top: 10%;margin-bottom: 10%;}</style></body></html>

本人也是初学者，所以讲述一下基本的概念：

关于ccs margin的概念，可以查看http://www.w3school.com.cn/css/css_margin.asp,具体的内容baidu,google之。

文中ccs为

<style>#droppable {width: 100%;height: 100%;float: left;margin-left: 10%;margin-top: 10%;margin-bottom: 10%;}</style>

我们主要是想获得margin-left 10%的值，我这里开始弄错了，以为是图片的宽度，实际上不是，而是 div这个框体的宽度。

得到的结果是div 的长和宽都是133.3，所以也是按照133.3进行偏移的，你可以看到图片距离最上面的距离也是133.3*133.3.

但是我不是特别清楚div和图片自身大小的关系（应该是没关系的），如果有人知道做个补充，如果后面知道的话我也会写进来。

更新一下，这里div用的父页面的宽度，所以你会发现如果你放大页面，可能会有不一样的问题。

如何保持两个图片相对位置不变呢？使用固定的margin_left.

另外注意一点是

var totalHeight = height + imageCorrdinate[1];var totalWidth = width + imageCorrdinate[0];alert("tatalheight= "+totalHeight+"totalwidth="+totalWidth);

其实是有问题的，得不到你想要的结果，javascript是弱类型的，如果要进行计算必须使用parseInt 或者parseFloat才行。

只用转换一个变量就ok

var totalHeight = height + parseFloat(imageCorrdinate[1]);var totalWidth = width + parseFloat(imageCorrdinate[0]);alert("tatalheight= "+totalHeight+"totalwidth="+totalWidth);