获取以特定单位表示的css属性的值

Question

我有这段代码显示一个带有百分比的“左” css属性的红色正方形，我想使用js中的警报显示该属性的当前值，这已经完成了，问题是它当前以px显示

    var element = document.getElementById('square'),
    style = window.getComputedStyle(element),
    left = style.getPropertyValue('left');

    alert(left); 

    #square{
        width: 100px;
        height: 100px;
        background-color: red;
        left: 10%;
        position: absolute;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>  
 

<div id="square"></div>

问题是：如何显示百分比？以及是否有可能在jQuery中使用类似的方法来使用更少的代码。

Answer 1

您应该执行以下操作：

var element = document.getElementById('square'),
    left = element.getBoundingClientRect().left,
    windowWidth = window.innerWidth;
    alert((left / windowWidth) * 100)

#square{
        width: 100px;
        height: 100px;
        background-color: red;
        left: 10%;
        position: absolute;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>  
 

<div id="square"></div>