jQuery操作元素的left和top
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
<style>
* {
margin: 0;
padding: 0;
}
div {
width: 200px;
height: 100px;
background-color: indianred;
position: absolute;
left: 100px;
top: 200px;
}
</style>
<script src="jquery-1.12.1.js"></script>
<script>
//点击按钮,设置div的left和top的值是原来的2倍
$(function () {
$("#btn").click(function () {
//获取left和top  ---获取的仍然是字符串类型
//        var l=$("#dv").css("left");
//        var t=$("#dv").css("top");
//        //console.log(l);
//        var left1=parseInt(l)*2;
//        var top1=parseInt(t)*2;
//        $("#dv").css("left",left1+"px");
//        $("#dv").css("left",top1+"px");
//该方法获取的是一个对象,该对象中有两个属性,left和top
//left和top包含left和margin-left和top和margin-top的值
//console.log($("#dv").offset().left);
$("#dv").css("left", $("#dv").offset().left * 2);
$("#dv").css("top", $("#dv").offset().top * 2);
$("#dv").offset({"left": 500, "top": 250});
});
});
/*
* 可以设置,也可以获取
* .width()是元素的宽
* .height()是元素的高
*
* .offset()--->获取的是对象,可以设置,也可以获取
* .offset({"left":值,"top":值});设置
*
*
* */
</script>
</head>
<body>
<input type="button" value="显示效果" id="btn"/>
<div id="dv"></div>
</body>
jquery修改html内容</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。