Question

我想知道是否可以在HTML width 属性中进行计算。类似的东西：

<SVG width="100%-10px">

或同样的CSS解决方法？

Answer 1

正如@Hunter建议的那样，你可以使用calc()，但我会反对它，因为：

由于浏览器处理子像素舍入的方式不同，使用calc（）表达式的布局可能会产生意外结果。

来源：http://caniuse.com/#feat=calc

只需使用javascript，如果它必须是动态的，以确保所有浏览器上的所有内容都一样。

HTML：

<div class="parent">
    <svg class="dynamic-width"></svg>
</div>

JS：

var parent = document.getElementsByClassName('parent')[0];
var pixelsToSubtract = 10;
var svg = document.getElementsByClassName('dynamic-width')[0];
svg.style.width = parent.getBoundingClientRect().width - 10 + 'px';

Answer 2

我认为您正在寻找的是CSS calc（）函数http://www.w3schools.com/cssref/func_calc.asp

以下是width: calc(100% - 10px);

的示例

您可以使用数学表达式，例如+ - * /

Answer 3

calc()可以正常使用：

＆＃13;

svg {
  background-color: red;
  width: calc(100% - 200px);
}

＆＃13;

<svg></svg>

＆＃13;

有没有办法计算html width属性？

3 个答案: