jquery css快捷方法
Posted 平凡的世界
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jquery css快捷方法相关的知识，希望对你有一定的参考价值。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>wrap</title> 6 <script type="text/javascript" src="../jquery/jquery-1.11.3.min.js"></script> 7 <style type="text/css"> 8 .lianjie { 9 display: inline-block; 10 border: 1px solid red 11 } 12 13 .border { 14 border: 1px solid red 15 } 16 17 .border1 { 18 outline: 4px dotted green 19 } 20 21 img { 22 margin: 10px; 23 padding: 10px; 24 border: 1px solid red; 25 } 26 </style> 27 </head> 28 <body> 29 <a href="http://www.baidu.com" class="baidu">百度</a> 30 <a href="http://www.souhu.com" class="souhu">百度</a> 31 <a href="http://www.xinlang.com" class="xinlng">百度</a>sssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss 32 <img src="1.jpg" alt="这是张图片"/> 33 34 <script type="text/javascript"> 35 $(document).ready(function () { 36 var imgHeight = $("img").height();//获取一个元素的高度 37 var imgWidth = $("img").width();//获取一个元素的宽度 38 var setHeight = $("img").height("100");//设置元素的高度 39 var setWidth = $("img").width("150");//设置元素的宽度 40 var innerHeight = $("img").innerHeight();//获得一个元素的内部高度，包裹paddding 不包括border margin 41 var innerWidth = $("img").innerWidth();//获得一个元素的内部宽度，包裹paddding 不包括border margin 42 var outerHeight = $("img").outerHeight();//获得一个元素的高度，包括内padding boder margin 43 var outerWidth = $("img").outerWidth();//获得一个元素的宽度，包括内padding boder margin 44 var __offset = $("img").offset();//获得一个元素相对于页面左上角的的坐标 45 var __postion = $("img").position();//获得一个元素相对于父元素的坐标 46 var _scrollLeft = $(window).scrollLeft();// 47 var _scrollTop = $(window).scrollTop(); 48 $(window).scroll(function () { 49 console.log($(window).scrollLeft()); 50 }); 51 console.log(imgHeight); 52 console.log(imgWidth); 53 console.log("内部高度:" + innerHeight); 54 console.log("内部宽度:" + innerWidth); 55 console.log("外部高度：" + outerHeight); 56 console.log("外部宽度：" + outerWidth); 57 console.log("距离页面右上角的距离：" + __offset.left + ":" + __offset.top); 58 console.log("距离父元素左上角的坐标：" + __postion.left + ":" + __postion.top); 59 console.log("横向滚动+" + _scrollLeft); 60 console.log("竖向滚动+" + _scrollTop); 61 62 //动态设置元素的高度 63 $("a").css({"display": "inline-block", "border": "1px solid green"}) 64 .height(function (index, elem) {//index是索引 elem是属性值 65 return (index + 1) * 25; 66 }); 67 68 }); 69 70 </script> 71 </body> 72 </html>
以上是关于jquery css快捷方法的主要内容，如果未能解决你的问题，请参考以下文章