js改变元素位置

JavaScript014

js改变元素位置,第1张

document.getElementById("元素的id").style.width = ''//意思是设置你的元素的宽度；

document.getElementById("元素的id").style.height = ''//意思是设置你的元素的高度；

如果你把上面的两句代码放到点击事件中去执行的话，那么就达到你的说的要求了

<div id="test" style="position:absolutetop:50%left:50%width:100pxheight:100pxmargin-top:-50pxmargin-left:-50pxbackground-color:#c00"></div>

css就可以了

先把图片的父元素的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>