一個(gè)JavaScript操作元素定位元素的實(shí)例

更新時(shí)間：2014年10月29日 16:48:14 投稿：whsnow

操作元素定位元素，大家會(huì)想到使用js來(lái)實(shí)現(xiàn)，下面有個(gè)不錯(cuò)的示例，大家可以看看

操作元素定位元素，用js來(lái)實(shí)現(xiàn)是個(gè)不錯(cuò)的選擇，下面有個(gè)示例，需要的朋友可以看看

<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title>每天一個(gè)JavaScript實(shí)例-操作元素定位元素</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)文章

微信小程序自定義組件components(代碼詳解)
這篇文章主要介紹了微信小程序自定義組件components知識(shí)，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2019-10-10
js setTimeout實(shí)現(xiàn)延遲關(guān)閉彈出層
有時(shí)候我們希望彈出層能夠?qū)崿F(xiàn)延遲關(guān)閉，并且鼠標(biāo)在彈出層區(qū)域移動(dòng)的時(shí)候能夠保持顯現(xiàn)，下面是具體的實(shí)現(xiàn)代碼。
2010-04-04
前端國(guó)際化JS庫(kù)i18n配置使用方法
在Web開(kāi)發(fā)中,實(shí)現(xiàn)前端的國(guó)際化i18n是一項(xiàng)重要的任務(wù),它允許網(wǎng)站內(nèi)容根據(jù)不同地區(qū)的用戶(hù)需求進(jìn)行本地化,下面這篇文章主要給大家介紹了關(guān)于前端國(guó)際化JS庫(kù)i18n配置使用的相關(guān)資料,需要的朋友可以參考下
2024-06-06
淺談JavaScript的計(jì)時(shí)器對(duì)象
下面小編就為大家?guī)?lái)一篇淺談JavaScript的計(jì)時(shí)器對(duì)象。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧，祝大家游戲愉快哦
2016-12-12
js操作iframe的一些方法介紹
本篇文章介紹了js操作iframe的一些方法的實(shí)例代碼與步驟，有需要的朋友可以參考一下
2013-06-06
微信域名檢測(cè)接口調(diào)用演示步驟（含PHP、Python）
這篇文章主要介紹了微信域名檢測(cè)接口調(diào)用演示步驟（含PHP、Python），文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-12-12
淺談JavaScript中定義變量時(shí)有無(wú)var聲明的區(qū)別
這篇文章主要介紹了JavaScript中定義變量時(shí)有無(wú)var聲明的區(qū)別分析以及示例分享,需要的朋友可以參考下
2014-08-08
js中變量的連續(xù)賦值(實(shí)例講解)
下面小編就為大家?guī)?lái)一篇js中變量的連續(xù)賦值(實(shí)例講解)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-07-07
JavaScript如何正確聲明和使用變量詳細(xì)代碼實(shí)例
變量是程序在內(nèi)存中申請(qǐng)的一塊用來(lái)存放數(shù)據(jù)的空間,下面這篇文章主要給大家介紹了關(guān)于JavaScript如何正確聲明和使用變量的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下
2024-07-07
前端對(duì)話框項(xiàng)目之調(diào)用字節(jié)Coze?API全過(guò)程
coze是字節(jié)跳動(dòng)旗下的零代碼大模型Agent定制平臺(tái),下面這篇文章主要介紹了前端對(duì)話框項(xiàng)目之調(diào)用字節(jié)Coze?API的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下
2025-04-04