JQuery 关于位置的计算(重要)

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-2.2.2.min.js"></script>
		<style type="text/css">
			* {
				padding: 0px;
				margin: 0px;
			}

			body {
				background: black;
			}

			#main {
				width: 200px;
				height: 200px;
				margin: 3px;
				padding: 5px;
				border: 7px solid red;
				position: absolute;
				top: 30px;
				left: 50px;
			}
		</style>
		<script type="text/javascript">
			$(function() {
				console.log(‘$("#main").width():‘ + $("#main").width());
				console.log(‘$("#main").innerWidth():‘ + $("#main").innerWidth());
				console.log(‘$("#main").outerWidth():‘ + $("#main").outerWidth());
				console.log(‘$("#main").outerWidth(true):‘ + $("#main").outerWidth(true));
				console.log(‘$("#main").position():‘ + $("#main").position().top + "," + $("#main").position().left);
				console.log(‘$("#main").offset():‘ + $("#main").offset().top + "," + $("#main").offset().left);
			})
		</script>
	</head>

	<body>
		<div id="main">

		</div>
	</body>

</html>

  

时间: 2024-10-06 21:59:30

JQuery 关于位置的计算(重要)的相关文章

jquery弹性云拖动计算功能

jquery弹性云拖动计算功能 西安天互7月份上线了自主研发的弹性云产品,第三代云主机全新上线,新一代存储架构安全稳定,性能更强. 今天来和大家分享下jquery弹性云拖动计算功能:首先html页面必须有的,拖动元素.拖动范围.背景等. 拖动效果分为两种:一是根据鼠标拖动像素的区间范围改变拖动元素的位置,二是拖动元素随着鼠标所在像素的改变而同时改变. 一是根据鼠标拖动像素的区间范围改变元素的位置:获取拖动元素对象,在他的点下元素事件(这里注意:是点下mousedown而不是点击click)函数中

jQuery的位置信息

jQuery的位置信息跟JS的client系列.offset系列.scroll系列封装好的一些简便api. 一.宽度和高度 获取宽度 .width() 描述:为匹配的元素集合中获取第一个元素的当前计算宽度值.这个方法不接受任何参数..css(width) 和 .width()之间的区别是后者返回一个没有单位的数值(例如,400),前者是返回带有完整单位的字符串(例如,400px).当一个元素的宽度需要数学计算的时候推荐使用.width() 方法 . 设置宽度 .width( value ) 描述

jQuery之位置

1.offset()获取匹配元素在相对浏览器窗口的偏移量 返回一个对象,包括两个属性.left:相对浏览器窗口左边的距离.top:相对浏览器顶部的距离.  $("#div1").offset().left; //返回id为div1相对于浏览器窗口最左边的距离  $("#div1").offset().top; //返回id为div1相对于浏览器窗口最顶部的距离 以下例子展示了,当点击文本框时,在下方显示一个日期div.紧紧贴住上面的文本框.并且不需要调div的css

JS HTML标签尺寸距离位置定位计算

四种浏览器对 clientHeight.offsetHeight.scrollHeight.clientWidth.offsetWidth 和 scrollWidth 的解释差异 网页可见区域宽:document.body.clientWidth网页可见区域高:document.body.clientHeight网页可见区域宽:document.body.offsetWidth (包括边线的宽)网页可见区域高:document.body.offsetHeight (包括边线的宽)网页正文全文宽:

关于jQuery放置位置的问题01

由于javascript是按照顺序执行的.因为其放置位置应该在被获取元素的前面. 如此: <!doctype html><!--告知该文档是HTML5文档--><html><head><meta charset="utf-8"><title>无标题文档</title><link href="css/style.css" rel="stylesheet" /&

jQuery---7. 常用API(jQuery尺寸位置操作 )

7.1 jQuery尺寸 <body> <div></div> <script> $(function() { // 1. width() / height() 获取设置元素 width和height大小 不包括border和padding console.log($("div").width());//200 // $("div").width(300);里面有参数那就是修改 // 2. innerWidth() /

【jquery 交换位置】jquery交换Div位置

Jquery 动态交换两个div位置并添加Css动画效果 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>jquery交换Div位置</title> </head> <body> <div id="top" style="width:100%;height:100px"&

jquery 滚动条位置的

$('#fixedHead').width()//div的宽度 $('#fixedHead')[0].scrollWidth//滚动条的宽度 两者的差为滚动条的宽度 var b1=$("#div1").height();//div的高度 var b2=$(this)[0].scrollTop;//滚动条距离顶端的位置 var b3=$(this)[0].scrollHeight;//滚动区的高度 b3==b1+b2滚动条到底

jQuery基础(4)- 位置信息、事件流、事件对象、事件代理、jquery事件

一.jQuery的位置信息 jQuery的位置信是JS的client系列.offset系列.scroll系列封装好的一些简便api. 1.宽度和高度 a.获取宽度和高度,例如: .width() // 获取匹配元素集合中的第一个元素的宽度值,内容宽度,不含padding .height() // 获取匹配元素集合中的第一个元素的高度值,内容高度,不含padding 注意:这个方法不接受任何参数..css(‘width’)(或.css(‘height’))和 .width()(或.height()