offsetWidth相关js属性
js你真的了解offsetWidth吗
offsetWidth是什么?
答:它可以获取物体宽度的数值
那么就只是这样吗!
html部分
<div id= "div1" ></div> <style> #div1 { width:200px; height:200px; border:1px solid red; padding:2px; margin:2px; background:green;} </style> |
请看上面的html,你知道div1的offsetWidth是多少吗?
是不是200啊
哈哈,错了
div1的offsetWidth是206
为什么?
答:offsetWidth实际获取的是盒模型(width+border + padding)
200+2+4=206
扩展:那么offsetLeft和offsetTop呢
答: offsetLeft = left + marginLeft
offsetTop = top +marginTop
示例:让div变窄
现象:onmouseover时,div变窄
原理:
oDiv.style.width = oDiv.offsetWidth - 1 + "px";
js部分
<script>
window.onload = function(){
var oDiv = document.getElementById("div1"); oDiv.onmouseover = function(){
document.title = oDiv.offsetWidth;
setInterval(function(){
oDiv.style.width = oDiv.offsetWidth - 1 + "px";
},30);
} }
</script>
运行上面示例后,你会发现一个奇怪的现象:
div在变宽
我们不是要div变窄的吗!它怎么越来越宽了呢?
那么这个问题,怎么解决呢?
解决方式:
用oDiv.style.width = parseInt(oDiv.style.width) - 1 + "px";
但是发现,onmouseover时,div它不动呢?
原因:oDiv.style.width,它只能获取行间的样式
所以需要调整成
<div id="div1" style="width:200px;"></div>
其实,我们还可以写成一个通用的方法,可以获取任意一个样式
方法:function getStyle(obj,name)
注意:此时样式可以不是行间样式,也能获取
知识点:
IE写法:currentStyle
非IE写法: getComputedStyle
完整代码,如下
1
2
3
4
5
|
<div id= "div1" ></div> <style> #div1 { width:200px; height:200px; border:1px solid red; padding:2px; margin:2px; background:green;} </style> |
<script>
window.onload = function(){
var oDiv = document.getElementById("div1"); oDiv.onmouseover = function(){
document.title = oDiv.offsetWidth;
setInterval(function(){
//oDiv.style.width = oDiv.offsetWidth - 1 + "px";
//oDiv.style.width = parseInt(oDiv.style.width) - 1 + "px";
oDiv.style.width = parseInt(getStyle(oDiv,"width"))- 1 + "px";
},30);
} } //获取行间任意样式
function getStyle(obj,name){
if(obj.currentStyle){ //IE
return obj.currentStyle[name];
} else {
return getComputedStyle(obj,false)[name]; //非IE
} } </script>
offsetWidth相关js属性的更多相关文章
- CSS.01 -- 选择器及相关的属性文本、文字、字体、颜色、
与html相比,Css支持更丰富的文档外观,Css可以为任何元素的文本和背景设置颜色:允许在任何元素外围设置边框:允许改变文本的大小,装饰(如下划线),间隔,甚至可以确定是否显示文本. 什么是CSS? ...
- 关于UIView用户交互相关的属性和方法
UIView除了负责展示内容给用户外还负责响应用户事件 1.交互相关的属性 userInteractionEnabled 默认是YES ,如果设置为NO则不响应用户事件,并且把当前控件从事件队列中删除 ...
- js 属性增改删操作
js 属性增改删操作,可参看菜鸟教程,这里记录一个小问题:disabled属性 使用setAttribute操作无法 禁用disabled属性,需使用removeAttribute操作,原因是只要有d ...
- JSP指令用来设置整个JSP页面相关的属性
JSP 指令 JSP指令用来设置整个JSP页面相关的属性,如网页的编码方式和脚本语言. 语法格式如下: <%@ directive attribute="value" %&g ...
- wpf ComboBox的SelectionBoxItem相关依赖属性
以前没有注意SelectionBoxItem相关依赖属性,这几天看wpf源码 特意研究了一番 <Style x:Key="ComboBoxStyle1" TargetType ...
- Vue.js学习笔记--1.基础HTML和JS属性的使用
整理自官网教程 -- https://cn.vuejs.org/ 1. 在HTML文件底部引入Vue <script src="https://cdn.jsdelivr.net/npm ...
- HTML连载13-CSS基本格式以及文字相关的属性
一.CSS格式 1.注意点: (1)style标签必须写在head标签的开始标签和结束标签之间(也就是必须和title标签师兄弟关系) (2)style标签中的属性type属性其实可以不写,默认就是t ...
- 当页面提交时,执行相关JS函数检查输入是否合法
当页面提交时,执行相关JS函数检查输入是否合法 关键代码 <form action="tj.php" method="post" onSubmit=&qu ...
- jquery属性的相关js实现方法
有些公司手机网站开发不用第三方的jquery或者zeptio,直接用原生的javascript.原生javascript功能是蛮强大的,只不过部分属性不支持IE8以下浏览器.下面对jquery相关方法 ...
随机推荐
- OS X第三方类库管理工具cocoapods入门
一.简介 什么是cocoapods?--是OS X和iOS下一个第三方类库管理工具.通过cocoapods,可以为项目添加"Pods"依赖库,并且管理其版本. cocoapods好 ...
- java 单例模式学习笔记
1.单例模式概述 单例模式就是确保类在内存中只有一个对象,该实例必须自动创建,并且对外提供. 2.优缺点 优点:在系统内存中只存在一个对象,因此可以节约系统资源,对于一些需要频繁创建和销毁的对象单例模 ...
- SparkStreaming读取Kakfa数据时发生OffsetOutOfRangeException异常
参考文章:http://www.jianshu.com/p/791137760c14 运行SparkStreming程序一段时间后,发现产生了异常: ERROR JobScheduler: Error ...
- 【java】扫描流Scanner接收输入示例
多用Scanner少用InputStream 多用BufferedReader少用Reader 多用PrintStream少用OutputStream 多用PrintWriter少用Writer pa ...
- iOS 多线程 简单学习NSThread NSOperation GCD
1:首先简单介绍什么叫线程 可并发执行的,拥有最小系统资源,共享进程资源的基本调度单位. 共用堆,自有栈(官方资料说明iOS主线程栈大小为1M,其它线程为512K). 并发执行进度不可控,对非原子操作 ...
- Python学习日记:day5-------dict字典
#字典dict------->唯一的映射类型 1.数据类型的划分 数据类型划分为可变数据类型和不可变数据类型. 不可变数据类型:tupe(元组).bool.int.str 可 ...
- C++ 头文件系列(list)
简介 list实现的实际上是双向链表,所以叫它doubly-linked list也许更好. 因为实现的是双向链表,所以它有两个非常重要的性质: 双向 链表 双向 双向意味着----给定一个元素,我们 ...
- [置顶]
android ListView包含Checkbox滑动时状态改变
题外话: 在xamarin android的开发中基本上所有人都会遇到这个小小的坎,的确有点麻烦,当时我也折腾了好一半天,如果你能看到这篇博客,说明你和我当初也是一样的焦灼,如果你想解决掉这个小小的坎 ...
- mysql case when group by实例
mysql 中类似php switch case 的语句. select xx字段, case 字段 when 条件1 then 值1 when 条件2 then 值2 else 其他值 END 别名 ...
- 推荐系统 LFM 算法的简单理解,感觉比大部分网上抄来抄去的文章好理解
本文主要是基于<推荐系统实践>这本书的读书笔记,还没有实践这些算法. LFM算法是属于隐含语义模型的算法,不同于基于邻域的推荐算法. 隐含语义模型有:LFM,LDA,Topic Model ...