js怎么改变图片位置

JavaScript06

js怎么改变图片位置,第1张

先把图片的父元素的css样式，postion设置为relative，然后图片的postion设置为absolute，然后用js来改变的图片的left 和 top数值就可以改变图片的位置了。如果不设置父元素，那就将图片的postion设置为relative，也可以改变位置，JS同样。

下面是个简单的例子，你参考下

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>TEST</title>

<style type="text/css">

        *{margin: 0 padding: 0}

        .wrap { position: relative }

        #pic { position: absolute }

</style>

</head>

<body>

<div class="wrap">

    <img id="pic" src="222.jpg">

</div>

<script type="text/javascript">

    var pic = document.getElementById("pic")

    pic.style.left=50+"px" //这里可以更改图片左边距

    pic.style.top=30+"px"  //这里可以更改图片的上边距

</script>

</body>

</html> <script type="text/javascript">

    var pic = document.getElementById("pic")

    pic.style.left=150+"px"

    pic.style.top=130+"px"

</script>

只有绝对定位（position:absolute）或者固定定位（position:fixed）的元素才能通过top和left等属性来改变其位置。所以你应该在css中把图片的定位属性设一下，当然用js设定也行。

另外，给p.style.top或者p.style.left赋值时，务必加上单位，比如 p.style.top="200px"，因为不这样做在有些浏览器中会出错的。