获取转换后元素的内侧宽度

Question

我想要的是获得转换后的容器中元素的实际宽度。

在下面的示例中，innerWidth给出150px，而实际宽度是75px (这就是我需要的值)

如何获得实际宽度？

​

let w = $("#child").innerWidth()
console.info(w);

#parent {
position:relative;
transform:scale(0.5)
}

#child {
width:150px;
height:150px;
background:red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="parent">
<div id="child"></div>
</div>

​

Answer 1

使用原生元素函数getBoundingClientRect()提取包含原始视口信息(位置、大小等)的对象。使用JQuery对象中的[0]来检索本机DOM元素。

​

let w = $("#child")[0].getBoundingClientRect()

console.info(w);

console.info(w.width + "x" + w.height);

#parent {
position:relative;
transform:scale(0.5)
}

#child {
width:150px;
height:150px;
background:red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="parent">
<div id="child"></div>
</div>

​

Answer 2

您可以简单地使用getBoundingClientRect来获取宽度，该宽度将为75

运行下面的代码片段。

​

let w = $('#child')[0].getBoundingClientRect().width;
console.log(w);

#parent {
position:relative;
transform:scale(0.5)
}

#child {
width:150px;
height:150px;
background:red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="parent">
<div id="child"></div>
</div>

​