javascript - Calculate div widthheight when inside a zoomscale transform - Stack Overflow

admin管理员组

文章数量:1429953

I have a div inside another div with transform scale applied.

I need to get the width of this div after the scale has been applied. The result of .width() is the original width of the element.

Please see this codepen:

Image of problem:

Hope this is clear enough, thank you. Code below:

---

HTML

<div class="outer">
  <div class="inner">
  </div>
</div>

CSS

.outer {
  height: 250px;
  width: 250px;
  background-color: red;
  position: relative;
  overflow: hidden;
}

.inner {
  background-color: green;
  height: 10px;
  width: 10px;
  transform: translate(-50%);
  position: absolute;
  top: 50%;
  left: 50%;

  transform: scale(13.0);
}

JS

$(function() {

   var width = $('.inner').width();

   // I expect 130px but it returns 10px
   //
   // I.e. It ignores the zoom/scale
   //      when considering the width
   console.log( width );

});

I have a div inside another div with transform scale applied.

I need to get the width of this div after the scale has been applied. The result of .width() is the original width of the element.

Please see this codepen: https://codepen.io/anon/pen/ZMpBMP

Image of problem:

Hope this is clear enough, thank you. Code below:

---

HTML

<div class="outer">
  <div class="inner">
  </div>
</div>

CSS

.outer {
  height: 250px;
  width: 250px;
  background-color: red;
  position: relative;
  overflow: hidden;
}

.inner {
  background-color: green;
  height: 10px;
  width: 10px;
  transform: translate(-50%);
  position: absolute;
  top: 50%;
  left: 50%;

  transform: scale(13.0);
}

JS

$(function() {

   var width = $('.inner').width();

   // I expect 130px but it returns 10px
   //
   // I.e. It ignores the zoom/scale
   //      when considering the width
   console.log( width );

});

• javascript
• jquery
• html
• css
• scale

Share Improve this question Follow asked Aug 29, 2018 at 6:10 JackJack 3,4151212 gold badges5454 silver badges6161 bronze badges 1

• Possible duplicate of Retrieve width/height of a css3 scaled element – insertusernamehere Commented Aug 29, 2018 at 6:15

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

Use getBoundingClientRect()

$(function() {

   var width = $('.inner')[0].getBoundingClientRect();
   // I expect 130px but it returns 10px
   //
   // I.e. It ignores the zoom/scale
   //      when considering the width
   console.log(width.width);

});

https://jsfiddle/3aezfvup/3/

i achieved your 130 by this

var x = document. getElementsByClassName('inner');
var v = x.getBoundingClientRect();
width = v.width;

You need the calculated value. This can be done in CSS.

Use calc() to calculate the width of a <div> element which could be any elements:

#div1 {
    position: absolute;
    left: 50px;
    width: calc(100% - 100px);
    border: 1px solid black;
    background-color: yellow;
    padding: 5px;
    text-align: center;
}

---

I found this about this topic.

Can i use Calc inside Transform:Scale function in CSS?

---

For JS:

How do I retrieve an HTML element's actual width and height?

本文标签： javascriptCalculate div widthheight when inside a zoomscale transformStack Overflow