js获取DIV的位置坐标的方法大概有两种:
第一种:编辑代码:var odiv=document.getElementById('divid')
alert(odiv.getBoundingClientRect().left)
alert(odiv.getBoundingClientRect().top)
第二种:编辑代码function CPos(x, y) {this.x = x this.y = y} /*** 得到对象的相对浏览器的坐标*/ function GetObjPos(ATarget {var target = ATargetvar pos = new CPos(target.offsetLeft, target.offsetTop)var target =target.offsetParentwhile (target pos.x += target.offsetLeft pos.y += target.offsetTop target = target.offsetParent }return pos }var obj = document.getElementById('divid') alert(GetObjPos(obj)['x'])//x坐标alert(GetObjPos(obj)['y'])//y坐标
SPAN 和 DIV 的区别在于,DIV(division)是一个块级元素,可以包含段落、标题、表格,乃至诸如章节、摘要和备注等。而SPAN 是行内元素,SPAN 的前后是不会换行的,它没有结构的意义,纯粹是应用样式,当其他行内元素都不合适时,可以使用SPAN
手机js页面实现一键定位,并且把获取的地理位置显示到文本框中代码如下:
var getLocation = function (successFunc, errorFunc) { //successFunc获取定位成功回调函数,errorFunc获取定位失败回调
//首先设置默认城市
var defCity = {
id: '000001',
name: '北京市',
date: curDateTime()//获取当前时间方法
}
//默认城市
$.cookie('VPIAO_MOBILE_DEFAULTCITY', JSON.stringify(defCity), { expires: 1, path: '/' })
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function (position) {
var lat = position.coords.latitude
var lon = position.coords.longitude
//var map = new BMap.Map("container") // 创建Map实例
var point = new BMap.Point(lon, lat)// 创建点坐标
var gc = new BMap.Geocoder()
gc.getLocation(point, function (rs) {
var addComp = rs.addressComponents
var curCity = {
id: '',
name: addComp.province,
date: curDateTime()
}
//当前定位城市
$.cookie('VPIAO_MOBILE_CURRENTCITY', JSON.stringify(curCity), { expires: 7, path: '/' })
//alert(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street)
if (successFunc != undefined)
successFunc(addComp)
})
},
function (error) {
switch (error.code) {
case 1:
alert("位置服务被拒绝。")
break
case 2:
alert("暂时获取不到位置信息。")
break
case 3:
alert("获取位置信息超时。")
break
default:
alert("未知错误。")
break
}
var curCity = {
id: '000001',
name: '北京市',
date: curDateTime()
}
//默认城市
$.cookie('VPIAO_MOBILE_DEFAULTCITY', JSON.stringify(curCity), { expires: 1, path: '/' })
if (errorFunc != undefined)
errorFunc(error)
}, { timeout: 5000, enableHighAccuracy: true })
} else {
alert("你的浏览器不支持获取地理位置信息。")
if (errorFunc != undefined)
errorFunc("你的浏览器不支持获取地理位置信息。")
}
}
var showPosition = function (position) {
var lat = position.coords.latitude
var lon = position.coords.longitude
//var map = new BMap.Map("container") // 创建Map实例
var point = new BMap.Point(lon, lat)// 创建点坐标
var gc = new BMap.Geocoder()
gc.getLocation(point, function (rs) {
var addComp = rs.addressComponents
var curCity = {
id: '',
name: addComp.province,
date: curDateTime()
}
//当前定位城市
$.cookie('VPIAO_MOBILE_CURRENTCITY', JSON.stringify(curCity), { expires: 7, path: '/' })
//alert(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street)
})
}
var showPositionError = function (error) {
switch (error.code) {
case 1:
alert("位置服务被拒绝。")
break
case 2:
alert("暂时获取不到位置信息。")
break
case 3:
alert("获取位置信息超时。")
break
default:
alert("未知错误。")
break
}
var curCity = {
id: '000001',
name: '北京市',
date: curDateTime()
}
//默认城市
$.cookie('VPIAO_MOBILE_DEFAULTCITY', JSON.stringify(curCity), { expires: 1, path: '/' })
}
一、PC端通过IP实现定位代码
<script type="text/javascript" src="http://fw.qq.com/ipaddress"></script>
<script type="text/javascript">
document.write(IPData[0]) //显示IP地址
document.write(IPData[2]) //显示省
document.write(IPData[3]) //显示市
</script>
二、获取客户端地址代码
<script>
var url = 'http://chaxun.1616.net/s.php?type=ip&output=json&callback=?&_=' + Math.random()
$.getJSON(url, function(data) {
alert(data.Ip)
})
</script>
在 JS获取div高度的方法 中,整理了几个有关于获取div高度的方法,后来又遇到一个问题,怎么获取DIV在页面中的绝对位置,因此在这篇笔记中记录一下。
页面结构
样式
getBoundingClientRect用于获取某个元素 相对于视窗 的位置集合。集合中有top, right, bottom, left等属性。
offsetLeft指的是元素相对于 版面或 由 offsetParent 属性指定的 父坐标 的计算上侧位置,整型,单位像素。
借用这个思路,当我们想获取元素的绝对位置时,可以递归遍历,直到元素的父元素为body为止。
关于offsetParent属性,有以下几点Tips。