width这样读取出来是一个字符串,并且带有单位,但是offsetwidth返回的是一个数值。
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<title>未定义</title>
<style type="text/css">
div{
width:100px;
height:100px;
border:5px solid red;
background-color:green;
padding:3px;
}
</style>
<script type="text/javascript">
window.onload=function(){
var _mytest=document.getElementById("mytest");
console.log("fsfs"+document.getElementById("mytest").offsetWidth);
console.log("aa"+document.getElementById("mytest").style.width)
}
</script>
</head>
<body>
<div id="mytest"></div>
</body>
</html>
,offsetWidth属性可以返回div的宽度,但是style.width并不能够返回此div的宽度。(因为在js中不能直接把获取写在样式表中的样式)
由运行结果也可以看出offsetWidth返回的宽度值包括:border+width+padding
但是如果把样式加载行内,就可以读取到了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
window.onload=function()
{
var oDiv=document.getElementById('div1');
var a=oDiv.style.width;
alert(typeof a);
alert(a);
}
</script>
</head>
<body>
<div id="div1" style="width:200px"></div>
</body>
</html>
width这样读取出来的不是一个数值,而是一个字符串,并且带有单位,但是offsetwidth返回的是一个数值。
这应该是两者在本质上的一个区别,还有在网上之前又看到过一种说法:
object.offsetLeft代表是当前object和父元素已经定义好的左边距。
object.style.left代表是object和父元素需要定义的左边距
不知道可不可以这样理解:offsetLeft是已经有的值,而left是需要计算的值,因此在运动框架的联系中经常看到的是将offsetLeft的值赋给left~~~
接下来一张图说明两者表象上的区别:
width这样读取出来是一个字符串,并且带有单位,但是offsetwidth返回的是一个数值。的更多相关文章
- <!-- str.startsWith('胡') 检查一个 字符串中是否有某字符 返回true false -->& vh 属性
1.<!-- str.startsWith('胡') 检查一个 字符串中是否有某字符 返回true false --> 2. vh 分享到选择其它项 复制本页链接 版本:CSS3 补 ...
- Python判断一个字符串中是否存在多个子串中的一个
在使用python的开发过程中,常常需要判断,字符串中是否存在子串的问题, 但判断一个字符串中是否存在多个字串中的一个时,如if (a or b) in c或者if x contains a|b|c| ...
- Java将整个文件夹里的文本中的字符串替换成另外一个字符串(可用于项目复制,变成另一个项目)
import org.junit.Test; import java.io.*; /** * User: HYY * Date: 13-8-18 * Time: 下午8:11 * To change ...
- StrStr,判断一个字符串是不是另一个字符串的字串,并返回子串的位置
public int strStr(String haystack, String needle) { if(haystack == null || needle == null) { return ...
- Hashtable集合 --练习题_计算一个字符串中每个字符出现次数
Hashtable集合 java.util.Hashtable<K,V>集合 implements Map<K,V>接口 Hashtable:底层也是一个哈希表,是一个线程安 ...
- ES6--javascript判断一个字符串是否存在另一个字符串中
es5中我们经常使用indexof()方法来判断一个字符串是否包含另外一个字符串中. 如果存在则返回匹配到的第一个索引值.如果没有则返回 -1.所以,判断一个字符串是否包含另外一个字符串中只需要判断是 ...
- php中读取文件内容的几种方法。(file_get_contents:将文件内容读入一个字符串)
php中读取文件内容的几种方法.(file_get_contents:将文件内容读入一个字符串) 一.总结 php中读取文件内容的几种方法(file_get_contents:将文件内容读入一个字符串 ...
- 字符串混淆技术应用 设计一个字符串混淆程序 可混淆.NET程序集中的字符串
关于字符串的研究,目前已经有两篇. 原理篇:字符串混淆技术在.NET程序保护中的应用及如何解密被混淆的字符串 实践篇:字符串反混淆实战 Dotfuscator 4.9 字符串加密技术应对策略 今天来 ...
- (转)sscanf() - 从一个字符串中读进与指定格式相符的数据
(转)sscanf() - 从一个字符串中读进与指定格式相符的数据 sscanf() - 从一个字符串中读进与指定格式相符的数据. 函数原型: Int sscanf( string str, stri ...
随机推荐
- linux系统查询命令
查看CPU 1.1 查看CPU个数 # cat /proc/cpuinfo | grep "physical id" | uniq | wc -l 2 **uniq命令:删除重复行 ...
- java 持有对象
1.泛型和类型安全的容器 ArrayList,可以自动扩充大小的数组,add插入对象,get访问对象,size查看对象数目. 1 /** 2 * 泛型和类型安全的容器 3 * 2016/5/6 4 * ...
- android 代码动态创建视图
LinearLayout 如何动态设置 margin? LinearLayout.LayoutParams lp = new LinearLayout.LayoutParams(LinearLayou ...
- JSP 基础
定义 JSP全称是Java Server Pages,它和servle技术一样,都是SUN公司定义的一种用于开发动态web资源的技术. JSP这门技术的最大的特点在于,写jsp就像在写html,但它相 ...
- 如何延长zencart1.5后台的登录时间而不退出
2012-12-25 使用过zencart1.5版本的人都知道,后台登陆后,如果没有任何操作的话最长15分钟后就自动退出,这个对于后台管理是比较麻烦的.这个是zencart1.5在安全性上做的一个改进 ...
- Android应用程序基础
Android程序使用Java语言编写.Android开发套件把数据.资源文件和Java代码编译到一个.以.apk为后缀名的Android压缩包中.一个单独的apk文件中的所有代码被认为是一个andr ...
- 表单提交中记得form表单放到table外面
帝国后台按栏目搜索文章时怎么都不生效 控制台查看原来是 栏目的select的值没有提交过去,原来由于form标签在table标签里面,导致js生成的<select>标签提交失败. 解决办 ...
- PHP个人常用函数封装
function GetIP(){ if(!empty($_SERVER["HTTP_CLIENT_IP"])){ $cip = $_SERVER["HTTP_CLIEN ...
- 何查询SQL Server数据库没有主键的表并增加主键
SQL Server数据库中,如果一个表没有主键,我们该如何查询呢?本文我们主要就介绍了如何查询数据库中没有主键的表名并为其增加主键的方法,希望能够对您有所帮助. 该功能的实现代码如下: declar ...
- 自己用wireshark 抓了个包,分析了一下
我自把对应 ip 包的头部拿出来手动分析了一下 :)