Question

我想通过js并使用calc应用maxHeight。问题是它什么都不用。

var div = document.getElementById("toto2");
var offtop = div.offsetTop;
var offHei = div.offsetHeight;

console.log("calc('500px-"+(Math.abs(offtop-offHei))+"px');");


div.style.maxHeight="calc('500px-"+(Math.abs(offtop-offHei))+"px');"
console.log(div.style.maxHeight)

为什么我要使用calc，是因为我将在代码中使用100％或100vh，并且我需要它才能使用calc

Answer 1

您需要删除" ;并用空格写出calc的正确格式

var div = document.getElementById("toto2");
var offtop = div.offsetTop;
var offHei = div.offsetHeight;

console.log("calc(500px - "+(Math.abs(offtop-offHei))+"px");


div.style.maxHeight="calc(500px - "+(Math.abs(offtop-offHei))+"px)"
console.log(div.style.maxHeight)

#toto1{
  height:500px;
  width:500px;
  background-color:red;
  overflow:auto;
}

#toto2{
  top:300px;
  position:relative;
  height:500px;
  width:500px;
  background-color:blue;
}

<div style="width:100%; height:100%;">
  <div id="toto1">  
    <div id="toto2"></div>
  </div>
</div>

<!--
Copyright 2016 Google Inc. All Rights Reserved. 
Use of this source code is governed by an MIT-style license that can be foundin the LICENSE file at http://material.angularjs.org/HEAD/license.
-->

Answer 2

您需要添加空格并删除''

编辑！

div.style.maxHeight="calc(500px - "+(Math.abs(offtop-offHei))+"px)"

无法在javascript中应用样式maxHeight（计算）

2 个答案: