<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ padding: 0px; margin: 0px; } .one{ width:200px; border:10px solid red; padding: 20px; margin: 30px; } </style> </head> <body> <input type="button" value="按钮" id="btn"/> <div id="one" class="one" style="height:200px;"></div> </body> </html> <script src="./jquery-3.4.1.js"></script> <script type="text/javascript"> $(function(){ //给按钮设置一个点击事件 $('#btn').click(function(){ //1.1 获取id为One的id的方法 //$('#one').css('height'); 200px //$('#one').css('width'); 200px //1.2 width() height() 获取高度不包括内边距 //获取或者设置狂傲,不包括psdding/border/margin console.log($('#one').width()); console.log($('#one').height()); //设置 $('#one').width(300); $('#one').height(400); //1.3 innerwidth() innerheight //方法返回元素的宽度/高度(包括内边距) console.log($('#one').innerwidth()); console.log($('#one').innerheight()); //1.4 outerwidth outerheight //方法返回元素的宽度/高度 console.log($('#one').outerwidth()); console.log($('#one').outerheight()); //1.5 outerwidth(true) outerheight(true) //方法返回元素的宽度/高度(包括内边框，外边框) console.log($('#one').outerwidth(true)); console.log($('#one').outerheight(true)); //1.6 获得页面可视区宽高 $(window).width(); $(window).height(); }); $(function(){ //offset() // 会得到一个对象 对象包含top和left的值 //元素距离document的位置 // posistion() //会得到一个对象 对象包含top和left的值 //距离定位父级的距离 $('#btn').click(){ $('#one').offset(); $('#one').posistion(); }; }); }); </script> jquery14 一些关于尺寸的函数
最新推荐文章于 2021-08-03 22:03:11 发布
1976
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
