Question

下面的代码应该在中间片段扩展到容器盒之外时减小它的大小：

＆＃13;

let middleSize = document.getElementById("middle").clientHeight;
let topSize = document.getElementById("top").clientHeight;
let bottomSize = document.getElementById("bottom").clientHeight;
if (middleSize > 200 - (topSize + bottomSize)) {
  document.getElementById("middle").fontSize = "50%"
}

＆＃13;

#container {
  width: 300px;
  height: 200px;
  display: grid;
  border-width: 10px;
}

div {
  border-width: 1px;
  border-style: solid;
}

#top {
  border-color: red;
  border-style: dotted;
}

#middle {
  border-color: blue;
  border-style: solid;
  border-width: 5px;
}

#bottom {
  border-color: green;
  border-style: dashed;
}

＆＃13;

<div id="container">
  <div id="top">
    hello
  </div>
  <div id="middle">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
  <div id="bottom">
    hello
  </div>
</div>

＆＃13;

将font-size: 50%;添加到#middle中的声明时，会应用尺寸。

为什么JS版本不起作用？

注意：这实际上根本不是重复的（问题与彼此无关）但是答案解决了我的问题，所以就这样吧。不是第一次，而不是最后一次发生这种情况 - 在某些时候，与一些雅虎贬低者和重复但不相当的恋人打架是令人厌倦的。（咆哮）

Answer 1

您需要将fontSize应用于元素的style属性。

document.getElementById("middle").style.fontSize = "50%"

Answer 2

是document.getElementById("middle").style.fontSize = "50%"

为什么fontSize在直接CSS声明时不应用大小？

2 个答案: