jquery css处理,包括CSS,位置,尺寸等

一:CSS

使用 说明 例子
css(name|pro|[,val|fn]) 访问匹配元素的样式属性
$("p").css("color");
$("p").css("color","red");

二:位置

使用 说明 例子

获取匹配元素在当前视口的相对偏移

回的对象包含两个整型属性:top 和 left,以像素计

$("p:last").offset({ top: 10, left: 30 });

offset().left 指定标签在html中的坐标
offset().top 指定标签在html中的坐标

 

获取匹配元素相对父元素的偏移

返回的对象包含两个整型属性:top 和 left

 指定标签相对父标签(relative)标签的坐标
获取匹配元素相对滚动条顶部的偏移
var p = $("p:first");
$("p:last").text( "scrollTop:" + p.scrollTop() );

$(window).scrollTop() 获取
$(window).scrollTop(0) 设置

 获取匹配元素相对滚动条左侧的偏移

var p = $("p:first");
$("p:last").text( "scrollLeft:" + p.scrollLeft() );
$("div.demo").scrollLeft(300);

三:尺寸

  • 使用
说明 例子
取得匹配元素当前计算的高度值(px)
$("p").height();
$("p").height(20);
 取得第一个匹配元素当前计算的宽度值(px)

$("p").width();
$("p").width(20);

获取第一个匹配元素内部区域高度

(包括补白、不包括边框)

var p = $("p:first");
$("p:last").text( "innerHeight:" + p.innerHeight() );
 获取第一个匹配元素内部区域宽度(包括补白、不包括边框)。

var p = $("p:first");
$("p:last").text( "innerWidth:" + p.innerWidth() );

获取第一个匹配元素外部高度(默认包括补白和边框)

设置为 true 时,计算边距在内

 

获取第一个匹配元素外部宽度(默认包括补白和边框)

设置为 true 时,计算边距在内

 

jquery-css处理的更多相关文章

  1. js,jquery,css,html5特效

    包含js,jquery,css,html5特效,源代码 本文地址:http://www.cnblogs.com/roucheng/p/texiao.html 2017新年快乐特效 jQuery最新最全 ...

  2. jquery css事件编程 尺寸设置

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. jquery css事件编程 位置 操作

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. jQuery & CSS 制作金属质感的选择按钮

    如果能把 CSS 运用好,我们创作出好的交互和效果的可能性大大增加.这篇文章中,我想与大家分享一组结合 jQuery & CSS 制作的充满金属质感的选择框效果,绝对是超级精美的效果. 在线演 ...

  5. 推荐20款基于 jQuery & CSS 的文本效果插件

    jQuery 和 CSS 可以说是设计和开发行业的一次革命.这一切如此简单,快捷的一站式服务.jQuery 允许你在你的网页中添加一些真正令人惊叹的东西而不用付出很大的努力,要感谢那些优秀的 jQue ...

  6. 复习练习(03)jquery Css方法一步步升级

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

  7. jQuery CSS 的操作函数

    jQuery CSS 操作函数 下面列出的这些方法设置或返回元素的 CSS 相关属性. CSS 属性 描述 css() 设置或返回匹配元素的样式属性. height() 设置或返回匹配元素的高度. o ...

  8. Jquery+css实现图片无缝滚动轮播

    Today,在XX学院的教学视频中,偶尔看到了Jquery+css实现图片无缝滚动轮播视频教程,虽然以前已写过类似的,但是我感觉他学的比较精简.为了方便以后做项目时直接拷贝,特地写出来,顺便和大家分享 ...

  9. jQuery css,position,offset,scrollTop,scrollLeft用法

    jQuery css,position,offset,scrollTop,scrollLeft用法: <%@ page language="java" import=&quo ...

  10. 【源码分享】jquery+css实现侧边导航栏

    jquery+css实现侧边导航栏 最近做项目的时候,突然想用一个侧边导航栏,网上找了几个插件,有的太丑而且不太符合我的预期.与其修改别人的代码,不如自己来写一个了.废话不多说先上图,感兴趣的请继续看 ...

随机推荐

  1. ThreadLocal 与 Synchronized区别

    相同:ThreadLocal和线程同步机制都是为了解决多线程中相同变量的访问冲突问题.不同:Synchronized同步机制采用了“以时间换空间”的方式,仅提供一份变量,让不同的线程排队访问:而Thr ...

  2. 贝云cms内容管理系统(thinkphp5.0开源cms管理系统)

    byCms包含文章,图片,下载,视频模型,基于thinkphp5.0.9,可无缝升级至thinkphp.1.0,是一套简单,易用的内容管理系统,旨在帮助开发者节约web应用后台开发时间和精力,以最快的 ...

  3. Redis 通信协议简单研究

    1.Redis网络通信协议 Redis底层网络通信协议其实是通过TCP来完成的. 2.Redis通信协议 Redis的通信协议首先是以行来划分,每行以\r\n行结束.每一行都有一个消息头,消息头共分为 ...

  4. BZOJ2721 Violet5樱花(数论)

    有(x+y)n!=xy.套路地提出x和y的gcd,设为d,令ad=x,bd=y.则有(a+b)n!=abd.此时d已是和a.b无关的量.由a与b互质,得a+b与ab互质,于是将a+b除过来得n!=ab ...

  5. 【java】JDK、JRE、JVM的关系

    目录结构: contents structure [-] 什么是JDK,JRE,JVM 安装JDK的时候为什么有两个jre 专用JRE 共用JRE 共用JRE和专用JRE的对比 java的跨平台特性 ...

  6. opencv ---getRotationMatrix2D函数

    getRotationMatrix2D函数 主要用于获得图像绕着 某一点的旋转矩阵  Mat getRotationMatrix2D(Point2f center, double angle, dou ...

  7. JSON.parseObject(String str)与JSONObject.parseObject(String str)的区别

    一.首先来说说fastjson fastjson 是一个性能很好的 Java 语言实现的 JSON 解析器和生成器,来自阿里巴巴的工程师开发.其主要特点是: ① 快速:fastjson采用独创的算法, ...

  8. pyspider框架的599证书问题

    使用PySpider 框架出现错误 HTTP 599: SSL certificate problem: unable to get local issuer certificate,如下 HTTP ...

  9. spring cloud 微服务架构 简介

     Spring Cloud 1. Spring Cloud 简介 Spring Cloud是在Spring Boot的基础上构建的,用于简化分布式系统构建的工具集,为开发人员提供快速建立分布式系统中的 ...

  10. element-ui 设置input的只读或禁用

    只读:readonly 在data里定义:readonly: true, 然后在input框里加上readonly就可以了. 禁用:disabled 在data里定义:edit: true, 然后在i ...