<!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. DBA_Oracle Database 11g 面向 DBA 和开发人员的重要特性

     2015-01-23 Created By BaoXinjian

  2. linux下的g++编译器安装

    再debian下直接apt-get install gcc g++就可以了.按照类似的逻辑,再Fedora下yum install gcc g++ 报告无法找到g++包. 查了一下,原来这个包的名字叫 ...

  3. C#(结构体_枚举类型）

        结构体一般定义在Main函数上面,位于Class下面,作为一个类:一般情况Struct定义在Main函数前面,Main函数里面的地方都可以使用,参数前面加上public代表公用变量. 用法 1 ...

  4. [物理学与PDEs]书中的错误指出

    记号意义: P--Page, 第几页; L--Line, 顺数第几行; LL--Last Line, 倒数第几行. P 64 L 1 ``15)'' should be ``14)''. P 70 L ...

  5. Document root element "configuration", must match DOCTYPE root "mapper".

    最近剛剛鼓搗mybatis , 第一個demo就出了問題.其實原因是因為將mapper中的頭copy到了configuration里去了 <?xml version="1.0" ...

  6. Wix打包相关资源

    1.自定义安装界面(WixUI_Custom.wxs) <?xml version="1.0" encoding="UTF-8"?> <Wix ...

  7. 【收藏用】--切勿转载Java处理XML的三种主流技术及介绍

    原帖地址 : http://www.ibm.com/developerworks/cn/xml/dm-1208gub/ XML (eXtensible Markup Language) 意为可扩展标记 ...

  8. [ActionScript] AS3代码实现渐变遮罩效果

    import flash.display.Shape; import flash.display.GradientType; import flash.geom.Matrix; import flas ...

  9. position中多次用到了relative和absolute，能不能具体介绍一下这两者的区别？

    position中多次用到了relative和absolute,能不能具体介绍一下这两者的区别? 一个是相对定位,一个是绝对定位. absolute生成绝对定位的元素,相对于 static 定位以外的 ...

  10. java 反射技术

    什么是反射?反射就是将字节码中的各种成分映射到相应的java类中来,java反射技术自JDK1.1以来就出现了,目前大多数流行的框架都采用了这种技术,可见其重要性,这篇文章将详细介绍我对java反射技 ...