jQuery，设置元素宽度减去大小，单位为 em

Question

我想将 #div_A 减去 3 em 的宽度应用到 #div_B。

$("#div_B").width($("#div_A").width() - 3);

我没有找到任何解释如何在 em 中仅指定 3 的内容。

谢谢！

Answer 1

Here 是如何使用 jquery.

将像素转换为 em

然而，您可以利用 css calc() 函数与 jquery 相结合，使其更短：

$(function() {
  $("#div_B").css({
    "width": "calc(" + $("#div_A").width() + "px - 3em)"
  });
});

div{
    display:block;
    height:100px;
    background:blue;
}
#div_A{
    width:100px;
    background:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div_A"></div>
<div id="div_B"></div>

Answer 2

要获得完整的浏览器支持，您必须计算出 3em 的像素数。

您可以通过使用设置为 3em 的元素并从中获取像素值来做到这一点

var div = $('<div />', {
    css : {
        position : 'relative',
        width    : '3em',
        height   : '1em'
    }
}).appendTo('body');

var w = div.width(); // width of 3em in pixels

div.remove();

$("#div_B").width( $("#div_A").width() - w );

由于em与当前使用的font-size相同，也可以

var em = (+$("#div_A").css('font-size').replace(/\D/g,''));
$("#div_B").width( $("#div_A").width() - (em * 3) );

jQuery，设置元素宽度减去大小，单位为 em

jQuery, set element width minus size in em

jquery

width