offset你們族(一)

時間  2020-05-25
標籤 offset 你們 欄目 快樂工作 简体版
原文   原文鏈接 
<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
      <title>offset你們族</title>
      <style type="text/css"> body,html{ margin:0; padding:0;
         } .grandpa{ margin-left:50px; width:500px; height:300px; background:#ff9933; position:relative; border:5px solid #33ff00;
            } .father{ width:300px; height:300px; background:#ff3366; padding:20px; border:5px solid #ffff00;
            } .son{ width:100px; height:100px; background:#0000ff; padding:10px; border:5px solid #ccffcc;
            }
      </style>
 </head>
 <body>
    <div class="grandpa">
      <div class="father" style="position:absolute;left:300px">
        <div class="son" style="left:300px" ></div>
      </div>
    </div>
    
    
   <script type="text/javascript">
       var father=document.querySelector(".father"); var grandpa=document.querySelector(".grandpa"); var son=document.querySelector(".son"); console.log(son.offsetWidth);//130
 console.log(son.offsetHeight);//130
 console.log(son.offsetLeft);//25
 console.log(son.offsetTop);//25
 console.log(son.offsetParent.className);//grandpa
 console.log(son.parentNode);//<div class="father"></div>
 console.log(son.style.left);//300px 這裏雖然得到300px 可是因爲沒有設置position屬性因此不起做用
 console.log(father.style.left);//300px
 son.offsetLeft="300"; console.log(son.offsetLeft);//20
 son.style.left="500px"; console.log(son.style.left); /* offsetWidth 元素自己的寬度 content+padding+border 動態 offsetHeight 元素自己的高度 content+padding+border 動態 offsetLeft 此元素左外邊框到有定位的長輩的邊框距離 就近長輩 offsetTop 此元素右外邊框到有定位的長輩的邊框距離 就近長輩 js沒有right 和 bottom 因此 right=son.offsetLeft+son.offsetWidth top=son.offsetTop+son.offsetHeight 1. son.style.left 訪問的話只能獲得行內的style值 這樣的div class="son" style="position:absolute;top:300px"></div> 2. 行內樣式若是沒有設置top值 style.top 獲得的是空字符串 "" 3.offsetLeft 獲得的是數字 30 而style.left獲得的是字符串 30px 4.offsetLeft 是 onlyRead 就是隻能夠get 不能set style.left 能夠set 也能夠get 5.offsetLeft 能夠返回沒有設置定位屬性盒子的left 而style.left 不行 沒有設置定位屬性的盒子沒有left top屬性 雖然能夠得到行內設置的left style.left 300px <div class="box" style="left:300px"></div> 可是沒有做用 由於沒有設置position 5. 若是想訪問css style 還能夠用如下方法 標準瀏覽器window.getComputedStyle(son)["left"]; IE son.currentStyle("left"); offsetParent 獲得最近的有定位的長輩 比較記憶 parentNode 獲得父節點 */
   </script>
 </body>
</html>

 
轉載於猿2048:➜《offset你們族(一)》javascript

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程