快捷導(dǎo)航

一個JavaScript操作元素定位元素的實例

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

操作元素定位元素，大家會想到使用js來實現(xiàn)，下面有個不錯的示例，大家可以看看

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

<!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)文章

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