CSS中关于:对象.OffsetWidth和对象.Style.width的区别

57 阅读 0 评论 38 点赞

我是靠谱客的博主单身耳机，最近开发中收集的这篇文章主要介绍CSS中关于:对象.OffsetWidth和对象.Style.width的区别，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

1.offsetWidth属性可以返回对象的padding+border+width属性值之和
style.width返回值就是定义的width属性值
2.offsetWidth属性仅是可读属性，而style.width是可读写的
3.offsetWidth属性返回值是整数，而style.width的返回值是字符串
4.style.width仅能返回以style方式定义的内部样式表的width属性值

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Exercise</title>
  <style media="screen">
  * {margin: 0px;padding: 0px;}
  #div1{
  width: 712px;
  height: 108px;
  background-color: pink;
  margin: 200px auto;
  position: relative;
  overflow: hidden;
  }
  #div1 ul {
  position: absolute;
  }
  #div1 ul li {
  float: left;
  width: 178px;
  height: 108px;
  list-style: none;}
  a{
  position:relative;
  top:150px;
  left: 600px;
  }
  a:HOVER{
  font-size: 50px;
  }
  </style>
  <script type="text/javascript">
    window.onload = function(){
    var speed = 2;
    var oDiv = document.getElementById('div1');
    var oUl = document.getElementsByTagName('ul')[0];
    var aLi = oUl.getElementsByTagName('li');
        oUl.innerHTML = oUl.innerHTML + oUl.innerHTML;
        oUl.style.width = aLi[0].offsetWidth * aLi.length + 'px';
    function move() {
        if(oUl.offsetLeft < -(oUl.offsetWidth / 2))
        {
        oUl.style.left = '0';
        }
        if(oUl.offsetLeft > 0)
        {
        oUl.style.left = -(oUl.offsetWidth / 2) + 'px';
        }
        oUl.style.left = oUl.offsetLeft + speed + 'px'; 
    };
    var timer = setInterval(move, 20);
    oDiv.onmouseover = function (){
        clearInterval(timer);
    };
    oDiv.onmouseout = function (){
        timer = setInterval(move, 20);
    };
    document.getElementsByTagName('a')[0].onclick = function (){
        speed = -2;
    };
    document.getElementsByTagName('a')[1].onclick = function (){
        speed = 2;
    };
    };
  </script>
</head>
<body>
 <a href="javasrcipt:;">left</a>
 <a href="javasrcipt:;">right</a>
 <div id="div1">
 <ul>
    <li> <img src="./images/1.jpg"></li>
    <li> <img src="./images/2.jpg"></li>
    <li> <img src="./images/3.jpg"></li>
    <li> <img src="./images/4.jpg"></li>  
</ul>

 </div>
</body>
</html>