<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .box{ width: 200px; height: 200px; position: relative; border:1px solid black; } .content{ width: 50px; height: 50px; background: red; position: absolute; top: 50px; left: 100px; } </style> <script type="text/javascript" src=‘jquery-3.2.1.min.js‘></script> <script type="text/javascript"> $(function(){ var $content_height = $(‘.content‘).css(‘height‘); //获取.content元素的height,带有单位50px var $height = $(‘.content‘).height(); //获取.content的高度，不带单位50 var $width = $(‘.content‘).width(); //获取.content的宽度，不带单位50 var $offset = $(‘.content‘).offset(); //获取.content元素在当前视窗的相对偏移 var top = $offset.top; //到当前视窗top的值 var left = $offset.left; //到当前视窗left的值 var $position = $(‘.content‘).position(); //获取元素相对于最近的一个position样式属性设置为relative或者absolute的父节点的相对偏移值 var position_top = $position.top; // var position_left = $position.left; var scrollTop = $(‘p‘).scrollTop(); //获取元素的滚动条距顶端的距离 var scrollLeft = $(‘p‘).scrollLeft(); //获取元素的滚动条距顶端的距离 $(‘.content‘).css(‘background‘,‘blue‘); //设置.content元素的background为蓝色 $(‘.content‘).css({‘background‘:‘blue‘,‘width‘:‘80px‘}); //设置多个style }); </script> </head> <body> <div class="box"> <div class="content"></div> </div> </body> </html>
jQuery-css()、height()、width()、offset()、position()、scrollTop()、scrollLeft()
原文：http://www.cnblogs.com/halai/p/6958832.html