javascript 中如何获得div的边框。

本文介绍如何在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);


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值