欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

一個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)文章

  • 本地Bootstrap文件字體圖標引入?yún)s無法顯示問題的解決方法

    本地Bootstrap文件字體圖標引入?yún)s無法顯示問題的解決方法

    這篇文章主要為大家詳細介紹了本地Bootstrap文件字體圖標引入?yún)s無法顯示問題的解決方法,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2016-12-12
  • javascript中replace( )方法的使用

    javascript中replace( )方法的使用

    JavaScript中replace函數(shù)方法是返回根據(jù)正則表達式進行文字替換后的字符串的復制。使用方法:其中stringObj是必選項。要執(zhí)行該替換的 String 對象或字符串文字。
    2015-04-04
  • 禁止按回車鍵提交表單的方法

    禁止按回車鍵提交表單的方法

    這篇文章主要介紹了禁止按回車鍵提交表單的方法的相關(guān)資料,需要的朋友可以參考下
    2015-06-06
  • JavaScript中的遍歷詳解(多種遍歷)

    JavaScript中的遍歷詳解(多種遍歷)

    編程這么多年,要是每次寫遍歷代碼時都用 for 循環(huán),真心感覺對不起 JavaScript 語言,這篇文章為大家分享幾種不同的遍歷方法,需要的朋友可以參考下
    2017-04-04
  • JS圖片預加載三種實現(xiàn)方法解析

    JS圖片預加載三種實現(xiàn)方法解析

    這篇文章主要介紹了JS圖片預加載三種實現(xiàn)方法解析,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
    2020-05-05
  • 學習RxJS之JavaScript框架Cycle.js

    學習RxJS之JavaScript框架Cycle.js

    這篇文章主要介紹了學習RxJS之JavaScript框架Cycle.js ,它是一個極簡的JavaScript框架(核心部分加上注釋125行),提供了一種函數(shù)式,響應式的人機交互接口,需要的朋友可以參考下
    2019-06-06
  • JS判斷移動端訪問設備并加載對應CSS樣式

    JS判斷移動端訪問設備并加載對應CSS樣式

    JS判斷不同web訪問環(huán)境,主要針對移動設備,提供相對應的解析方案,本例是加載不同的css樣式
    2014-06-06
  • JS隨機密碼生成算法

    JS隨機密碼生成算法

    這篇文章主要為大家詳細介紹了JS隨機密碼生成算法,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2019-09-09
  • js+canvas繪制矩形的方法

    js+canvas繪制矩形的方法

    這篇文章主要介紹了js+canvas繪制矩形的方法,涉及JavaScript調(diào)用html5的canvas組件繪制圖形的相關(guān)技巧,需要的朋友可以參考下
    2016-01-01
  • 深入理解Ajax的get和post請求

    深入理解Ajax的get和post請求

    下面小編就為大家?guī)硪黄钊肜斫釧jax的get和post請求。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2016-06-06

最新評論