js复习：移动元素offsetLeft,offsetTop，10%，30%, left

最新推荐文章于 2023-06-14 11:46:35 发布

半浮名

最新推荐文章于 2023-06-14 11:46:35 发布

阅读量1.1k

点赞数 1

分类专栏： html,css,js基础知识笔记文章标签： javascript 前端 css3

本文链接：https://blog.csdn.net/qq_51813155/article/details/121197611

版权

笔记同时被 2 个专栏收录

84 篇文章 0 订阅

订阅专栏

html,css,js基础知识

14 篇文章 1 订阅

订阅专栏

移动元素

1.我们怎么移动元素？

1.给元素绝对定位，或相对定位，
position: relative; 有left和right.相对于

offsetLeft值：元素加了定位，看上一级的定位元素有关，是与
上一级的定位元素的偏移量。
如果：上一级定位元素是body,就是元素相对于body偏移量

在js中：有
div.style.left=div.offsetLeft+50+‘px’;//可以控制元素位置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>



<style>


    div{
position: absolute;
left: 30px;
        width: 300px;height: 300px;
        background-color: pink;
       
    }
</style>
<body>
    



<div>




</div>

<button>1111</button>

<script>



var div=document.querySelector("div");
var button=document.querySelector("button");
console.log(div.offsetLeft);




button.οnclick=function(){

div.style.left=div.offsetLeft+50+'px';

console.log("我是");

}


</script>




</body>
</html>

在这里插入图片描述

点击：按钮元素移动了：offseLf:变化中
可以通过：div.style.left=div.offsetLeft+50+‘px’;
实现：元素移动
在这里插入图片描述

加一个li:让它相对于div偏移：加定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>



<style>


    div{
position: relative;/*加了定位，offsetLeft是相对于body偏移量*/
left: 30px;
        width: 300px;height: 300px;
        background-color: pink;
       
    }
    li{
position: relative;/*加了定位*/
width: 10px;
height: 10px;
background-color: brown;

    }
</style>
<body>
    



<div>


    <li>11111111111</li>


</div>

<button>1111</button>

<script>



var div=document.querySelector("div");
var button=document.querySelector("button");
var li=document.querySelector("li");
console.log(div.offsetLeft);




button.οnclick=function(){

div.style.left=div.offsetLeft+50+'px';
li.style.left=li.offsetLeft+10+'px';

console.log(div.offsetLeft);
console.log("li的偏移量");
console.log(li.offsetLeft);

}


</script>




</body>
</html>

效果图：

在这里插入图片描述

这个可以应用：轮播图

第二种方法：移动元素

var index=0
div.style.left=(index*(100))+’%’;
index++;

父元素的变化,给left赋值为父元素的10%，100%
*li.style.left=(index10)+’%’;/ 相对于 /

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>



<style>


    div{
position: relative;/*加了定位，offsetLeft是相对于body偏移量*/
left: 30px;
        width: 300px;height: 300px;
        background-color: pink;
       
    }
    li{
position: relative;
width: 10px;
height: 10px;
background-color: brown;

    }
</style>
<body>
    



<div>


    <li>11111111111</li>


</div>

<button>1111</button>

<script>



var div=document.querySelector("div");
var button=document.querySelector("button");
var li=document.querySelector("li");
index=0;
console.log(div.offsetLeft);




button.οnclick=function(){


li.style.left=(index*10)+'%';/* 相对于 */

console.log(li.style.left);
console.log("li的偏移量");
console.log(li.offsetLeft);
index++;

}


</script>




</body>
</html>