Question

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

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

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

谢谢！

Answer 1

Here是如何使用jquery将像素转换为em。

但是，你可以利用css calc()函数和jquery来缩短它：

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

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与当前使用的字体大小相同，因此也可以

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

jQuery，在em中设置元素宽度减去大小

2 个答案: