javascript 中如何获得div的边框。_如何获取div的边框-优快云博客

本文链接：https://blog.youkuaiyun.com/mlkiller/article/details/8755894

本文介绍如何在JavaScript中获取图片的边框及其相对于容器的偏移量，包括使用jQuery解析margin属性并进行数值计算的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本文讲述的是如何在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);