<!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. Form_通过Custom.pll新增菜单项（案例）

    2014-05-31 Created By BaoXinjian

  2. OAF_EO系列7 - OAException异常处理及实现（案例）

    2014-06-12 Created By BaoXinjian

  3. apache 做http代理

    1.修改 http.conf 文件 ,增加 监听端口 Listen 开启需要的扩展 LoadModule proxy_module modules/mod_proxy.so LoadModule pr ...

  4. Nginx_修改Web服务器头信息(Header)里的Server值[转]

    http://blog.rekfan.com/?p=122 黑客攻击一个网站,往往需要了解服务器的架构,网站的架构等信息,了解了这些信息,就知道网站薄弱的地方在哪里了!    为了不让对方知道自己的w ...

  5. 【转】H264编码原理以及I帧B帧P帧

    前言 H264是新一代的编码标准,以高压缩高质量和支持多种网络的流媒体传输著称,在编码方面,我理解的他的理论依据是:参照一段时间内图像的统计结果表明,在相邻几幅图像画面中,一般有差别的像素只有10%以 ...

  6. 自己动手写ORM

    http://blog.csdn.net/sundacheng1989/article/category/1350100

  7. js跳转页面方法整理

    1.window.location.href方式 window.location.href="http://www.zgw8.com"; 2.window.navigate方式跳转 ...

  8. SQL Server 2008 建立分区表 脚本

    /*第一步:创建分区函数*/Create partition function Part_func_Bag(varchar(20)) as range right /*正式区间for values(N ...

  9. js替换字符串中全部“-”

    alert("2014-03-22".replace('-','')); alert("2014-03-22".replace(/-/g,'')); 第一个运行 ...

  10. JS实例

    JS实例 1.跑马灯 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...