<!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返回的是一个数值。的更多相关文章

  1. <!-- str.startsWith('胡') 检查一个 字符串中是否有某字符 返回true false -->& vh 属性

    1.<!-- str.startsWith('胡')  检查一个 字符串中是否有某字符 返回true false --> 2. vh 分享到选择其它项   复制本页链接 版本:CSS3 补 ...

  2. Python判断一个字符串中是否存在多个子串中的一个

    在使用python的开发过程中,常常需要判断,字符串中是否存在子串的问题, 但判断一个字符串中是否存在多个字串中的一个时,如if (a or b) in c或者if x contains a|b|c| ...

  3. Java将整个文件夹里的文本中的字符串替换成另外一个字符串（可用于项目复制，变成另一个项目）

    import org.junit.Test; import java.io.*; /** * User: HYY * Date: 13-8-18 * Time: 下午8:11 * To change ...

  4. StrStr,判断一个字符串是不是另一个字符串的字串，并返回子串的位置

    public int strStr(String haystack, String needle) { if(haystack == null || needle == null) { return ...

  5. Hashtable集合 --练习题_计算一个字符串中每个字符出现次数

    Hashtable集合 java.util.Hashtable<K,V>集合 implements Map<K,V>接口  Hashtable:底层也是一个哈希表,是一个线程安 ...

  6. ES6--javascript判断一个字符串是否存在另一个字符串中

    es5中我们经常使用indexof()方法来判断一个字符串是否包含另外一个字符串中. 如果存在则返回匹配到的第一个索引值.如果没有则返回 -1.所以,判断一个字符串是否包含另外一个字符串中只需要判断是 ...

  7. php中读取文件内容的几种方法。（file_get_contents：将文件内容读入一个字符串）

    php中读取文件内容的几种方法.(file_get_contents:将文件内容读入一个字符串) 一.总结 php中读取文件内容的几种方法(file_get_contents:将文件内容读入一个字符串 ...

  8. 字符串混淆技术应用 设计一个字符串混淆程序 可混淆.NET程序集中的字符串

    关于字符串的研究,目前已经有两篇. 原理篇:字符串混淆技术在.NET程序保护中的应用及如何解密被混淆的字符串  实践篇:字符串反混淆实战 Dotfuscator 4.9 字符串加密技术应对策略 今天来 ...

  9. （转）sscanf() - 从一个字符串中读进与指定格式相符的数据

    (转)sscanf() - 从一个字符串中读进与指定格式相符的数据 sscanf() - 从一个字符串中读进与指定格式相符的数据. 函数原型: Int sscanf( string str, stri ...

随机推荐

  1. java 继承与多态

    Example5_11.java class 动物 { void cry() { } } class 狗 extends 动物 { void cry() { System.out.println(&q ...

  2. POJ 1365 Prime Land（整数拆分）

    题意:感觉题意不太好懂,题目并不难,就是给一些p和e,p是素数,e是指数,然后把这个数求出来,设为x,然后让我们逆过程输出x-1的素数拆分形式,形式与输入保持一致. 思路:素数打表以后正常拆分即可. ...

  3. Python 安装matplotlib,six,dateutil,pyparsing 完整过程

    [摘要:正在做词频剖析的时间,须要用matlotlib 做图表,柱状图啥的,因而便最先了一个又一个的装置库的进程 由于matplotlib 须要依附很多其他科教盘算的第三圆库,须要一个一个的装置了.. ...

  4. OpenCart之联系我们contact us页面提交时邮件错误

    许多OpenCart系统的用户都发现联系我们contact us页面提交时发生错误.本页发生错误是正常的,原因如下: 1. 你设定了SMTP,因此SMTP默认是从你设置的SMTP的email账户中发出 ...

  5. STM32F2系列时钟的配置

    前一节详细介绍了系统默认的时钟配置,及各路时钟输出是多少,这是默认配置的,但实际使用的时钟默认的时钟并不符合要求,所以就得知道如何调用库函数进行配置. 最好的资料就是查阅stm32f2xx_rcc.c ...

  6. JSP文件上传--FileUpload组件

    如果使用上传操作,并且没有使用框架之类,最好使用Smartupload,因为FileUpdate太难使用. 下载组件: fileupload包:http://commons.apache.org/pr ...

  7. MDK下调试时提示AXF文件无法导入的解决方法（转）

    源:http://blog.163.com/zhaojun_xf/blog/static/3005058020117784643555/ 在开发ARM项目中,很多工程师都不太喜欢使用MDK的调试模式, ...

  8. AVR之BOOTLOADER技术详解（转）

    源:http://blog.csdn.net/zhenhua10/article/details/6442412 ATmega128具备引导加载支持的用户程序自编程功能(In-System Progr ...

  9. POJ 2155 Matrix（二维树状数组）

    与以往不同的是,这个树状数组是二维的,仅此而已 #include <iostream> #include <cstdio> #include <cstring> # ...

  10. Chapter 1 First Sight——4

    Charlie gave me an awkward, one-armed hug when I stumbled my way off the plane. 当我让我蹒跚的从飞机上下来,查理斯单手给 ...