一个JavaScript操作元素定位元素的实例_javascript技巧-js教程-PHP中文网

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

php中文网

发布： 2016-05-16 16:32:42

原创

1375人浏览过

操作元素定位元素，用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&#63;","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 class="aritcle_card">
                        <a class="aritcle_card_img" href="/xiazai/code/5944">
                            <img src="https://img.php.cn/upload/webcode/000/120/096/5d89c06e901a7326.jpg" alt="移动端UI&微信UI YDUI Touch">
                        </a>
                        <div class="aritcle_card_info">
                            <a href="/xiazai/code/5944">移动端UI&微信UI YDUI Touch</a>
                            <p>YDUI Touch专为移动端打造，在技术实现、交互设计上兼容主流移动设备，保证代码轻、性能高；使用 Flexbox 技术，灵活自如地对齐、收缩、扩展元素，轻松搞定移动页面布局；用 rem 实现强大的屏幕适配布局，等比例适配所有屏幕；自定义Javascript组件、Less文件、Less变量，定制一份属于自己的YDUI。</p>
                            <div class="">
                                <img src="/static/images/card_xiazai.png" alt="移动端UI&微信UI YDUI Touch">
                                <span>81</span>
                            </div>
                        </div>
                        <a href="/xiazai/code/5944" class="aritcle_card_btn">
                            <span>查看详情</span>
                            <img src="/static/images/cardxiayige-3.png" alt="移动端UI&微信UI YDUI Touch">
                        </a>
                    </div>
                 
<div id="c"> 
<p>C</p> 
</div> 
</div> 
</div> 
<div id="cursor"> 

</div> 
</body> 
</html>

登录后复制