一个JavaScript操作元素定位元素的实例

操作元素定位元素，用js来实现是个不错的选择，下面有个示例，需要的朋友可以看看

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>每天一个JavaScript实例-操作元素定位元素</title>
<style>
div#a{
width:500px;
}
div{
border:1px solid #000;
padding:10px;
}
#cursor{
position:absolute;
background-color:#ff0;
width:20px;
height:20px;
left:50px;
top:300px;
}
</style>
<script>
function positionObject(obj){
var rect = obj.getBoundingClientRect();
return [rect.left,rect.top];
}
window.onload = function(){
var tst = document.documentElement.getBoundingClientRect();
alert(tst.top);
var cont = 'A';
var cursor = document.getElementById("cursor");
while(cont){
cont = prompt("where do you want to move the cursor block?","A");
if(cont){
cont = cont.toLowerCase();
if(cont == "a"||cont=="b"||cont=="c"){
var elem = document.getElementById(cont);
var pos = positionObject(elem);
console.log(pos);
cursor.setAttribute("style","top:"+pos[1]+"px;"+"left:"+pos[0]+"px");
}
} 

}
}
</script>
</head> 

<body> 

<div id = "a">
<p>A</p>
<div id ="b">
<p>B</p>
<div id="c">
<p>C</p>
</div>
</div>
</div>
<div id="cursor"> 

</div>
</body>
</html>
赞 (0)

相关推荐

  • 一个JavaScript操作元素定位元素的实例

    操作元素定位元素,用js来实现是个不错的选择,下面有个示例,需要的朋友可以看看 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>每天一个JavaScript实例-操作元素定位元素</title> <style> div#

  • Javascript操作select控件代码实例

    这篇文章主要介绍了Javascript操作select控件代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 新增.修改.删除.选中.清空.判断存在等 1.判断select选项中 是否存在Value="paraValue"的Item function jsselectisexititem(objselect,objitemvalue) { var isexit = false; for(var i=0;i<objselect

  • javascript 操作cookies详解及实例

    javascript 操作cookies详解 这段操作cookies的方法我使用很久了,但是一直一来没遇到什么问题,今天在做一个在第一个页面保存了cookies,第二个页面获取或者第三个页面获取的功能中,发现了方法的局限性,比如,第一个页面路径为 http://xxxxx/cyb-car2016/h5OfficeWorker/index,第二个页面路径为 http://xxxxx/cyb-car2016/h5AlertController/index,其中除了域名是一样之外,还有一个命名空间不一

  • 一个JavaScript去除字符串末尾的空白实例代码

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>每天一个JavaScript实例-去除字符串末尾的空白</title> <script> function white(){ var input = document.ge

  • JavaScript用二分法查找数据的实例代码

    整理文档,搜刮出一个JavaScript用二分法查找数据的实例代码,顺便做个笔记 //二分法查数据 var arr=[41,43,45,53,44,95,23]; var b=44; var min=0; var max=arr.length; for(var i=1;i<arr.length;i++){ //外层循环控制排序的次数 for(var j=0;j<arr.length-i;j++){//内层循环控制循环的个数 if(arr[j]<arr[j+1]){ z=arr[j]; a

  • javascript操作select元素实例分析

    本文实例讲述了javascript操作select元素的用法.分享给大家供大家参考.具体分析如下: 这里熟悉一下js对select元素的操作,html页面中建立一个form,其中包含一个select元素和submit按钮. 当选择select中某一项时改变其文字,当select中所有项的文字都改变后,重新恢复它们. 当按下submit时关闭窗口本身,代码如下: <!DOCTYPE html> <html> <head> <title>duang for se

  • JavaScript操作select元素和option的实例代码

    废话不多说了,直接给大家贴代码,具体代码如下所示: <!DOCTYPE html PUBLIC "-//WC//DTD XHTML . Transitional//EN" "http://www.w.org/TR/xhtml/DTD/xhtml-transitional.dtd"> <html xmlns="http://www.w.org//xhtml"> <head> <title></t

  • 一个JavaScript获取元素当前高度的实例

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>每天一个JavaScript实例-获取元素当前高度</title> <style> #date{width:90%;height:25%;padding:10px;back

  • JavaScript操作元素实例大全

    JavaScript操作元素实例大全

    操作元素内容参考之前文章:JavaScript WebAPI.DOM.事件.操作元素 案例:显示隐藏密码案例 核心思路: (操作表单元素属性) 点击眼睛按钮,把密码框类型改为文本框就可以看见里面的密码 一个按钮两个状态, 点击一次,切换为文本框,继续点击一次切换为密码框 算法:利用一个flag变量,来判断flag的值,如果是1 就切换为文本框,flag 设置为0,如果是0 就切换为密码框,flag设置为1 <style> .box{ position: relative; width: 400

  • javascript数组操作(创建、元素删除、数组的拷贝)

    1.数组的创建 复制代码 代码如下: var arrayObj = new Array(); //创建一个数组var arrayObj = new Array([size]); //创建一个数组并指定长度,注意不是上限,是长度var arrayObj = new Array([element0[, element1[, ...[, elementN]]]]); 创建一个数组并赋值 要说明的是,虽然第二种方法创建数组指定了长度,但实际上所有情况下数组都是变长的,也就是说即使指定了长度为5,仍然可以

随机推荐