offset
2015-08-23 22:23
405 查看
offsetParent(父级元素position是relative或absolute)
width/height(内容的宽高)
clientWidth=width+paddingleft+paddingright
clientHeight=height+paddingtop+paddingbottom
offsetWidth=width+paddingleft+paddingright+borderleft+borderright
offsetheight=height+paddingtop+paddingbottom+bordertop+borderbottom
offsetLeft=(offsetParent的padding-left)+(中间元素的offsetWidth)+(当前元素的margin-left)。
offsetTop=(offsetParent的padding-top)+(中间元素的offsetHeight)+(当前元素的margin-top)。
//jquery 对css的控制
$('#divid').css('propertyName') //get property value
$('#divid').css('propertyName','value') //set property value
$('#divid').offset().top //相对于浏览器
$('#divid').offset().left
$('#divid').position().top //相对于最近设置过position的元素
$('#divid').position().left
$('#divid').scrollTop(offset) //返回或设置
$('#divid').height() //content height
$('#divid').outerHeight() //等于offsetheight outerHeight(true)=offsetheight+margin
$(window).height() //浏览器高度
$('#divid').css('cssText') //var csstxt = $('#selector').css('cssText') + ';top:100;left:100;border:1px solid red;color:#f00;';$('#selector').css('cssText', csstxt);
width/height(内容的宽高)
clientWidth=width+paddingleft+paddingright
clientHeight=height+paddingtop+paddingbottom
offsetWidth=width+paddingleft+paddingright+borderleft+borderright
offsetheight=height+paddingtop+paddingbottom+bordertop+borderbottom
offsetLeft=(offsetParent的padding-left)+(中间元素的offsetWidth)+(当前元素的margin-left)。
offsetTop=(offsetParent的padding-top)+(中间元素的offsetHeight)+(当前元素的margin-top)。
//jquery 对css的控制
$('#divid').css('propertyName') //get property value
$('#divid').css('propertyName','value') //set property value
$('#divid').offset().top //相对于浏览器
$('#divid').offset().left
$('#divid').position().top //相对于最近设置过position的元素
$('#divid').position().left
$('#divid').scrollTop(offset) //返回或设置
$('#divid').height() //content height
$('#divid').outerHeight() //等于offsetheight outerHeight(true)=offsetheight+margin
$(window).height() //浏览器高度
$('#divid').css('cssText') //var csstxt = $('#selector').css('cssText') + ';top:100;left:100;border:1px solid red;color:#f00;';$('#selector').css('cssText', csstxt);
相关文章推荐
- Java(TM) platform SE binary占用几乎全部CPU
- 定义系统级别的异常代替接口、类中方法处理失败的信息返回
- 基于七牛Python SDK写的一个同步脚本
- 全文检索技术Lucene入门和学习、与数据库数据结合的demo实现
- Scala学习笔记--Constructor
- poj(1661)——Help Jimmy(二维dp)
- C语言运算符优先级表
- 高阶MapReduce_1_链接多个MapReduce作业
- URAL1277Cops and Thieves Dinic最大流
- Intellij IDEA工具Java web 环境搭建
- RedHat7.0下MySQL5.6.24数据库的安装以及数据库存储目录迁移
- css盒子模型
- leetcode 169: Majority Element
- 用Lucene索引数据库
- Android快速开发框架-AndroidFine,GitHub开源
- 黑马程序员——集合——Set集合,增强for循环,数据结构,泛型,Collections集合工具类
- 总结篇(2)-----第一遍机房收费系统(上机)
- Tomcat与Web应用的配置
- 各种小空间总结
- matlab简单实现SVD的推荐