<!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. SecureCRT控制台显示中文字符的设置

  2. Well, let's start everything from the very beginning.

    帝都的霾仿佛亘古不变,不知觉2015年竟已快到尾声,而我在IBM也已呆了4个月.回顾过往多遇贵人,所获颇丰.最幸运的还是自己不忘初心,仍在不断成长.继续学习. 过去的几个月一直用WordPress,搭 ...

  3. [hibernate]基本值类型映射之日期类型

    hibernate基本值类型映射中日期类型支持date,time,timestamp这三个选项,其中 date:对应数据库中的date类型,表示只显示日期 time:对应数据库中的time类型,表示只 ...

  4. NeHe OpenGL教程 第四十二课：多重视口

    转自[翻译]NeHe OpenGL 教程 前言 声明,此 NeHe OpenGL教程系列文章由51博客yarin翻译(2010-08-19),本博客为转载并稍加整理与修改.对NeHe的OpenGL管线 ...

  5. 在一个窗口中显示多个视频，并在每个子窗口左上角显示系统时间，函数cvShowManyImages是改写的

    #include <cv.h> #include <highgui.h> #include <stdio.h> #include <stdarg.h> ...

  6. vs2012出现无法启动iis express web 服务器的错误

    一直用的好好的,今天调试时却总报上面的错误.“文件查看器”->"windows 日志"->"系统"里发现有几条“HttpEvent”错误, 具体信息 ...

  7. 牢骚 - 你代码写得丑，又不肯用好一点的IDE，这让我很为难啊。

    又有人问我代码错误,发过来就是一篇巨丑无比的代码,先不说左大括号转行还和代码写在同一行的谭浩强风格,你这狗啃的一样的缩进是闹哪样!粘进VS2015里面,自动格式化,瞬间赏心悦目,编译错误出了5行,我直 ...

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

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

  9. Apache Thrift学习之一（入门及Java实例演示）

    目录: 概述 下载配置 基本概念 数据类型 服务端编码基本步骤 客户端编码基本步骤 数据传输协议 实例演示(java) thrift生成代码 实现接口Iface TSimpleServer服务模型 T ...

  10. python爬取并计算成绩

    模拟登录后抓取成绩,计算绩点. # -*- coding: utf-8 -*- import urllib import urllib2 import cookielib import re impo ...