鍍金池/ 問答/HTML/ 原生JS無法輸出dom元素的left值是怎么回事？

原生JS無法輸出dom元素的left值是怎么回事？

代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        *{
            margin:0;
            padding:0;
        }
        .outer{
            width: 300px;
            height: 300px;
            border: 1px solid #000;
            margin-left: 100px;
        }
        .outer .inner{
            width: 100px;
            height: 100px;
            background-color: skyblue;
            position: absolute;
            left: 0;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="inner"></div>
    </div>
    <script type="text/javascript">
        var i = document.querySelector(".inner");
        i.style.backgroundColor = "red";
        console.log(i.style.left);
    </script>
</body>
</html>

left值可以獲取到，可以寫，但是輸出不了left的值，顯示的是空白的，這是怎么回事呢？

回答
編輯回答
毀了心

圖片描述道友，這玩笑不好開，請打開控制臺認真看一下，這是復(fù)制你的代碼運行結(jié)果

2017年4月10日 22:16
編輯回答
醉淸風(fēng)

?.?
我試了下可以輸出

2018年6月14日 16:35
編輯回答
老梗

i.style.left = 200 + "px";

2018年9月13日 01:04
編輯回答
北城荒

你是認真的? 完全可以輸出啊.. 是不是被你console.log 過濾掉了

2017年6月29日 10:17
編輯回答
影魅

你的意思是沒設(shè)置就獲取不了吧，因為style.left只能獲取行間的樣式(html 里寫style)，你寫在css里是獲取不了的，要獲取用getComputedStyle，ie的話用currentStyle

  //i.style.left = "200px";
  console.log(i.style.left); // 獲取不了
console.log(getElementStyle(i,"left"));
function getElementStyle(obj,attr){
　　if(obj.currentStyle){
　　　　return obj.currentStyle[attr];
　　}else{
　　　return getComputedStyle(obj,false)[attr];   //第二個參數(shù)是偽類
　　}
}
2017年7月21日 12:47
編輯回答
孤慣

應(yīng)該是可以輸出的吧。
建議使用getComputedStyle(i, null).left替代i.style.left

2017年9月25日 02:14
編輯回答
晚風(fēng)眠

我猜題主說的是先console.log(i.style.left)無法獲取值，
設(shè)置之后又可以獲取到了。
這么獲?。?code>document.defaultView.getComputedStyle(i, null)['left']

2017年1月11日 22:24