Fatal编程技术网
  • javascript/
  • Javascript 变换后的宽度/高度

Javascript 变换后的宽度/高度

javascript jquery html css

Javascript 变换后的宽度/高度,javascript,jquery,html,css,Javascript,Jquery,Html,Css,应用transform:rotate（45度）后，如何检索宽度和高度属性 类似地，旋转后的11x11正方形变为17x17（Chrome结果），但javascript仍然返回原始宽度/高度-10x10 如何得到这个17x17？即使你旋转一些东西，它的尺寸也不会改变，所以你需要一个包装器。 尝试使用另一个div元素包装div，并计算包装器的尺寸： <style type="text/css"> #wrap { border:1px solid green; flo

应用
transform:rotate（45度）后，如何检索宽度和高度属性

类似地，旋转后的11x11正方形变为17x17（Chrome结果），但javascript仍然返回原始宽度/高度-10x10


如何得到这个17x17？
即使你旋转一些东西，它的尺寸也不会改变，所以你需要一个包装器。
尝试使用另一个div元素包装div，并计算包装器的尺寸：


  <style type="text/css">
  #wrap {
    border:1px solid green;
    float:left;
    }

  #box {
    -moz-transform:rotate(120deg);
    border:1px solid red;
    width:11px;
    height:11px;
  }
  </style>

  <script type="text/javascript">
  $(document).ready(function() {
    alert($('#box').width());
    alert($('#wrap').width());
  });
  </script>
</head>

<body>
 <div id="wrap">
  <div id="box"></div>
  </div>
</body>



如果您正在寻找一个函数以编程方式计算这些值


// return an object with full width/height (including borders), top/bottom coordinates
var getPositionData = function(el){
    return $.extend({ width : el.outerWidth(false), height : el.outerHeight(false) }, el.offset());
};

// get rotated dimensions   
var transformedDimensions = function(el, angle){
    var dimensions = getPositionData(el);
    return { width : dimensions.width + Math.ceil(dimensions.width * Math.cos(angle)), height : dimensions.height + Math.ceil(dimensions.height * Math.cos(angle)) };
}



这是我贴的一个小东西。这可能不是最好的东西，但它为我做了这项工作。
你可以通过
htmldomeElement
的计算来获得它，而不是自己计算

考虑到变换矩阵，这将返回具有正确高度和宽度的对象


.
我为此制作了一个函数

它计算any、deep、
transform、
ed、
position、
ed DOM元素的4个顶点3d坐标，实际上就是任何元素：请参见

有了这些顶点，你可以计算任何东西：宽度，高度。。。例如，在你的情况下：


// norm(a,b)
var width = Math.sqrt(Math.pow(v.b.x - v.a.x, 2) + Math.pow(v.b.y - v.a.y, 2));


有关更多信息，请参阅

--

它是作为npm模块发布的（没有dep），因此只需使用以下工具安装：


npm install domvertices



干杯。
我想知道为什么你会得到17x17，假设它从11x11旋转了45度，那么新的尺寸应该是15x15，或者16x16。我认为Chrome会自动获得cosinus结果。也许在Firefox中它不会改变，但inspector视图中的Chrome会显示计算值。包装器是一个很好的解决方案，但它很昂贵。@Tom firefox的行为和您描述的一样。首先，我们需要弄清楚，一个旋转的盒子仍然有相同的尺寸。就像，如果你在桌子上旋转一张纸，它的尺寸保持不变。这就是你需要包装纸的原因。如果你不能支持它，你需要数学来计算你需要的尺寸。firefox内部使用相同的数学计算wrap的尺寸。请在这里考虑我的+1。是的，当你发表这篇文章的时候，我已经做了一个函数来计算新的维度。因为CSS3/DOM3/HTML5没有使用本机函数来检索这些基本值，我终于发现javascript中的cos/sin使用了radial！不是学位！我希望我用这句话节省了一些时间；）数学解决方案对宽度很有效，我怎样才能同样计算高度？@Userpassword是的，jQuery就是这样工作的。您需要使用
[0]
或
get（0）
或类似工具。我只需要让它正常工作。是的，我知道这个问题很古老，但是如果今天问这个问题，我相信这应该是公认的答案。这要简单得多。谢谢，我同意大家的意见。与其他过度设计/复杂的解决方案相比，这应该是可以接受的答案。我知道这类评论是不允许的，但我喜欢@alex如何将OP的图片放到JSFIDLE，而不是一些随机图片！对于我们这些数学记忆不太好的人来说，
width
和
height
（或
w，h
）是一个很好的补充即使是
函数
s，如果您不想使用calc，也可以避免它们。@abernier

// norm(a,b)
var width = Math.sqrt(Math.pow(v.b.x - v.a.x, 2) + Math.pow(v.b.y - v.a.y, 2));



npm install domvertices