专栏首页老雷PHP全栈开发jquery教程之css处理

jquery教程之css处理

老雷jquery教程之css处理

一、css 访问匹配元素的样式属性

css(name|pro|[,val|fn])

获取值

  $("p").css("height")

设置值

  $("p").css("height","160px")
  $("p").css({
    height:"100px",
    width:"100px",
    marginTop:"10px"
  })

二、offset 获取匹配元素在当前视口的相对偏移,针对浏览器窗口

offset([{top,left}])

设置

  $(".box").offset({ top: 10, left: 30 })

获取

  var p=$(".box").offset();
  $(".box").html( "left: " + offset.left + ", top: " + offset.top );

三、position() 获取匹配元素相对父元素的偏移。

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

  var position = p.position();
  $("div").html( "left: " + position.left + ", top: " + position.top );

四、scrollTop([val]) 获取匹配元素相对滚动条顶部的偏移

  $(".box").scrollTop(300);
  var s=$(".box").scrollTop()

五、scrollLeft([val]) 获取匹配元素相对滚动条左侧的偏移

  $(".box").scrollLeft(300);
  var s=$(".box").scrollLeft()

六、width 宽度,height 高度

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

七、innerWidth innerHeight

innerWidth 获取第一个匹配元素内部区域宽度(包括内补白、不包括边框)。

innerHeight 获取第一个匹配元素内部区域高度(包括内补白、不包括边框)。

$("p").innerWidth();

八、outerWidth outerHeight

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

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

本文分享自微信公众号 - 老雷PHP全栈开发(L362606856),作者:雷日锦

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-12-04

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 老雷微信小程序教程之开发框架学习

    1.全局配置 小程序根目录下的 app.json 文件用来对微信小程序进行全局配置。

    老雷PHP全栈开发
  • Js基础教程之for循环语句

    老雷PHP全栈开发
  • 了解常见的网络协议

    我们使用socket主要是用来进行长连接的,包括聊天,物联网等,通常是基于tcp/udp协议之上。

    老雷PHP全栈开发
  • 谷歌源生bug发现与解决记录

    1、进入拨号界面,输入 *#*#4636#*#* ,然后会进入手机测试界面。 2、点击第三栏 Wi-Fi information 。 3、进入Wi-Fi i...

    用户7557625
  • ubuntu之i386与amd64

    一直以来,我以为intel的U用i386,AMD的用amd64,原来,事实不是这样。

    libo1106
  • nn.modulelist()

    如果在构造函数__init__中用到list、tuple、dict等对象时,一定要思考是否应该用ModuleList或ParameterList代替。如果你想设...

    于小勇
  • [数据库基础]——编码标准之编码注意事项(持续更新)

    前面已经介绍三篇关于数据库编码规范的博文,现在来一个收尾篇,在说一下代码时候应该注意的东西 1. 不要使用SELECT *,使用SELECT时一定要指定所需要的...

    数据分析
  • Bash shell中bash、sh、source及“.”点等五种执行方式的区别与联系

    版权声明:本文为耕耘实录原创文章,各大自媒体平台同步更新。欢迎转载,转载请注明出处,谢谢

    耕耘实录
  • 业务快速迁移Serverless,你必须知道这件事儿

    Tencent Serverless 目前已经支持了不少语言的热门框架,包括 Express、 Koa、Egg 以及 Flask 等等大家熟悉的框架都可以通过...

    腾讯云serverless团队
  • 行业丨企业合同管理的意义是什么?

    市场经济活动中,合同已无处不在,销售采购需要签合同、场所租赁需要签合同、广告投放需要签合同、企业间合作需要签合同……合同贯穿于企业的每一项经营活动中,企业想要不...

    法大大电子合同

扫码关注云+社区

领取腾讯云代金券