<!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>

您可能感興趣的文章:

定位

相關(guān)文章

本地Bootstrap文件字體圖標(biāo)引入?yún)s無法顯示問題的解決方法
這篇文章主要為大家詳細(xì)介紹了本地Bootstrap文件字體圖標(biāo)引入?yún)s無法顯示問題的解決方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2016-12-12
javascript中replace( )方法的使用
JavaScript中replace函數(shù)方法是返回根據(jù)正則表達(dá)式進(jìn)行文字替換后的字符串的復(fù)制。使用方法:其中stringObj是必選項。要執(zhí)行該替換的 String 對象或字符串文字。
2015-04-04
禁止按回車鍵提交表單的方法
這篇文章主要介紹了禁止按回車鍵提交表單的方法的相關(guān)資料,需要的朋友可以參考下
2015-06-06
JavaScript中的遍歷詳解(多種遍歷)
編程這么多年，要是每次寫遍歷代碼時都用 for 循環(huán)，真心感覺對不起 JavaScript 語言,這篇文章為大家分享幾種不同的遍歷方法,需要的朋友可以參考下
2017-04-04
JS圖片預(yù)加載三種實現(xiàn)方法解析
這篇文章主要介紹了JS圖片預(yù)加載三種實現(xiàn)方法解析,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
2020-05-05
學(xué)習(xí)RxJS之JavaScript框架Cycle.js
這篇文章主要介紹了學(xué)習(xí)RxJS之JavaScript框架Cycle.js ,它是一個極簡的JavaScript框架（核心部分加上注釋125行），提供了一種函數(shù)式，響應(yīng)式的人機交互接口,需要的朋友可以參考下
2019-06-06
JS判斷移動端訪問設(shè)備并加載對應(yīng)CSS樣式
JS判斷不同web訪問環(huán)境，主要針對移動設(shè)備，提供相對應(yīng)的解析方案，本例是加載不同的css樣式
2014-06-06
JS隨機密碼生成算法
這篇文章主要為大家詳細(xì)介紹了JS隨機密碼生成算法，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2019-09-09
js+canvas繪制矩形的方法
這篇文章主要介紹了js+canvas繪制矩形的方法,涉及JavaScript調(diào)用html5的canvas組件繪制圖形的相關(guān)技巧,需要的朋友可以參考下
2016-01-01
深入理解Ajax的get和post請求
下面小編就為大家?guī)硪黄钊肜斫釧jax的get和post請求。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-06-06