<!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>wrap</title>

     <script type="text/javascript" src="../jquery/jquery-1.11.3.min.js"></script>

     <style type="text/css">

         .lianjie {

             display: inline-block;

             border: 1px solid red

         }

         .border {

             border: 1px solid red

         }

         .border1 {

             outline: 4px dotted green

         }

         img {

             margin: 10px;

             padding: 10px;

             border: 1px solid red;

         }

     </style>

 </head>

 <body>

 <a href="http://www.baidu.com" class="baidu">百度</a>

 <a href="http://www.souhu.com" class="souhu">百度</a>

 <a href="http://www.xinlang.com" class="xinlng">百度</a>sssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss

 <img src="1.jpg" alt="这是张图片"/>

 <script type="text/javascript">

     $(document).ready(function () {

         var imgHeight = $("img").height();//获取一个元素的高度

         var imgWidth = $("img").width();//获取一个元素的宽度

         var setHeight = $("img").height("");//设置元素的高度

         var setWidth = $("img").width("");//设置元素的宽度

         var innerHeight = $("img").innerHeight();//获得一个元素的内部高度，包裹paddding 不包括border margin

         var innerWidth = $("img").innerWidth();//获得一个元素的内部宽度，包裹paddding 不包括border margin

         var outerHeight = $("img").outerHeight();//获得一个元素的高度，包括内padding boder margin

         var outerWidth = $("img").outerWidth();//获得一个元素的宽度，包括内padding boder margin

         var __offset = $("img").offset();//获得一个元素相对于页面左上角的的坐标

         var __postion = $("img").position();//获得一个元素相对于父元素的坐标

         var _scrollLeft = $(window).scrollLeft();//

         var _scrollTop = $(window).scrollTop();

         $(window).scroll(function () {

             console.log($(window).scrollLeft());

         });

         console.log(imgHeight);

         console.log(imgWidth);

         console.log("内部高度:" + innerHeight);

         console.log("内部宽度:" + innerWidth);

         console.log("外部高度：" + outerHeight);

         console.log("外部宽度：" + outerWidth);

         console.log("距离页面右上角的距离：" + __offset.left + ":" + __offset.top);

         console.log("距离父元素左上角的坐标：" + __postion.left + ":" + __postion.top);

         console.log("横向滚动+" + _scrollLeft);

         console.log("竖向滚动+" + _scrollTop);

    var box = $("div");

    console.log("height:"+box.height() + 'px');//盒子本身的高度

    console.log("innerHeight:"+box.innerHeight() + "px");//盒子本身的高度+内边距的高度

    console.log("outerHeight:"+box.outerHeight() + "px");//盒子本身的高度+内边距的高度+边框的高度

    console.log("outerHeight(true):"+box.outerHeight(true) + "px");//盒子本身的高度+内边距的高度+边框的高度+外边距的高度

    //获取元素相对于父元素的偏移(不包括外边距)

    var positon = box.position();

    console.log("positionLeft:"+positon.left + "px");

    console.log("positionTop:"+positon.top + "px");

    //获取元素相对与视窗的偏移（包括外边距）

    var offset = box.offset();

    console.log("offsetLeft:"+offset.left + "px");

    console.log("offsetTop:"+offset.top + "px");

　　

 //动态设置元素的高度  $("a").css({"display": "inline-block", "border": "1px solid green"})  .height(function (index, elem) {//index是索引 elem是属性值  return (index + ) * ;   });    });   </script>  </body>  </html>

jquery css快捷方法的更多相关文章

  1. javascript : 写一个类似于 jquery css() 的方法

    我们知道,jquery css() 方法可以很方便的更改DOM的样式. 但从原理上,这个并不复杂,我们完全可以自己写一个. 上代码. updateDOMStyle(DOM, obj){ Object. ...

  2. 复习练习（03）jquery Css方法一步步升级

    jquery Css方法一步步升级 <script src="jquery-1.8.3.js"></script> <script type=&quo ...

  3. jQuery的hover方法搭配css的hover选择器，实现选中元素突出显示

    问题简述: 今天做帮一个师姐做网页遇到一个这样的要求: 鼠标不移动进表格,表格透明度不变. 鼠标移动进表格,hover到的单元格透明度不变,没hover到的单元格透明度改变. 先贴我已经实现好的效果, ...

  4. jQuery CSS()方法改变CSS样式实例解析

    转自:http://www.jbxue.com/article/24588.html 分享一个jQuery入门实例:使用CSS()方法改变现有的CSS样式表,css()方法在使用上具有多样性.其中有一 ...

  5. css中:not()选择器和jQuery中.not()方法

    因为老是将这两个的not方法弄混,所以写一下备忘. css中:not()选择器用法 :not 伪类选择器可以筛选不符合表达式的元素,:not(selector) 其中的selector为css选择器 ...

  6. ios jquery css('left')无法读取属性解决的方法

    ios jquery css('left')无法读取属性解决的方法 <pre>$(this).position().left因为display:none状态下是读取不了 $(this).o ...

  7. jQuery css()方法及方法

    知识点一:jQuery css()方法 1.css()方法是什么? css()方法设置或返回被选元素的一个或多个样式属性. 2.返回CSS属性 1.$("p").css(" ...

  8. 针对jquery的优化方法，你知道几条

    (转)我一直在寻找有关jQuery性能优化方面的小窍门,能让我那臃肿的动态网页应用变得轻便些.找了很多文章后,我决定将最好最常用的一些优化性能的建议列出来 ====================== ...

  9. jquery.on()超级方法

    $.on()方法是jquery1.7之后的一个超级方法,将事件绑定和事件委托整合到一个函数中去,支持绑定多个事件,并且可以绑定自定义事件.使用起来很方便. demo传送门 事件委托 首先说一下事件委托 ...

随机推荐

  1. Flink单机版安装与wordCount

    Flink为大数据处理工具,类似hadoop,spark.但它能够在大规模分布式系统中快速处理,与spark相似也是基于内存运算,并以低延迟性和高容错性主城,其核心特性是实时的处理流数据.从此大数据生 ...

  2. RMAN_学习实验1_RMAN备份标准过程（案例）

    2014-12-23 Created By BaoXinjian

  3. bug_ _ 应用汇==常见错误列表

    应用汇的安装功能是基于安卓系统的adb开发的,adb的安装过程分为传输与安装两步.在出错后,助手会在右下角弹出详细的错误编号及建议. 下面列举出几种常见的错误及解决方法. Q1:无效的安装包,安装包已 ...

  4. 转--Android中调用webservice的工具类

    最近学习WebService,感觉利用这个借口开发网站的Android客户端方便及了,用到一个工具类,这里铭记一下. public static final String WebServiceName ...

  5. webView--总结

    Anaroid WebView API详解--http://blog.csdn.net/zhangcanyan/article/details/51344090;Android5.1系统WebView ...

  6. 不能向Github提交某一類型的文件

    之前在github上建了6個project,但是其中有一個不能提交jar文件,其他的都可以.後來發現原來在項目中有一個叫.gitignore的文件,其他項目里的都是/bin,但是那個不能提交jar的項 ...

  7. error-iis-Service Unavailable

    Service Unavailable Service Unavailable HTTP Error 503. The service is unavailable.

  8. JAVA 文档注释，类的说明，HTML说明文档的生成

    有的时候,我们会写一些类,编译成.class文件,给别人使用,那么,别人不知道这个类有哪些方法,如何调用. 所以我们需要做一个类的说明文档. 可以采用在.java类里面进行注释,通过注释来生成类的说明 ...

  9. MySQL作业

    创建作业事件 MONTH STARTS '2015-01-01 05:30:01' ON COMPLETION NOT PRESERVE ENABLE DO CALL sp_moveLoginReco ...

  10. 不容错过错的xcode 插件 转至于cocoachina

    古人云“工欲善其事必先利其器”,打造一个强大的开发环境,是立即提升自身战斗力的绝佳途径!以下是搜集的一些有力的XCode插件.   1.全能搜索家CodePilot 2.0 你要找的是文件?是文件夹? ...