<!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. MyEclipse背景色不伤眼+字体大小调节+代码格式化不换行

  2. sql异常

    表结构 Id int UncheckedTitle nvarchar(50) CheckedValue nvarchar(1000) CheckedRemark nvarchar(1000) Chec ...

  3. 在Linux环境下安装和配置phpmyadmin

    phpmyadmin是一种MySQL的图形化管理工具,该工具允许你在web界面上管理你的mysql数据库,不可谓不方便快捷. 此次安装与配置是在centos 6.4系统下,该系统已部署lnmp环境.关 ...

  4. Java队列集合的性能测试

    同时开10个线程存入和取出100万的数据,结论如下: DoubleBufferedQueue < ConcurrentLinkedQueue < ArrayBlockingQueue &l ...

  5. block的传值简单示例仅供参考，大牛勿喷

    #import "ViewController.h" typedef void(^sumBlock)(int s);//声明为一个类型; /** *  用声明的block类型 su ...

  6. 想直接用Windows API开发程序，你真的应该知道这些！

    1,Windows数据类型. 2,Windows数据类型命名规律. 3,匈牙利表示法.

  7. [Flex] PopUpButton系列——CornerRadius的运用

    <?xml version="1.0" encoding="utf-8"?><!--设置主按钮圆角半径 PopUpButtonCornerRa ...

  8. 零成本实现接口自动化测试 – Java+TestNG 测试Restful service

    接口自动化测试 – Java+TestNG 测试 Restful Web Service 关键词:基于Rest的Web服务,接口自动化测试,数据驱动测试,测试Restful Web Service, ...

  9. Throttling ASP.NET Web API calls

    http://blog.maartenballiauw.be/post/2013/05/28/Throttling-ASPNET-Web-API-calls.aspx https://github.c ...

  10. PHP 文件读取 fread、fgets、fgetc、file_get_contents 与 file 函数

    fread().fgets().fgetc().file_get_contents() 与 file() 函数用于从文件中读取内容. fread() fread() 函数用于读取文件(可安全用于二进制 ...