Question

如何仅在特定条件下添加样式？

我正在处理一个具有最大高度的div，并且内容不断增加。随着添加更多内容，div会增加，但是当达到最大高度时，它会停止增长并获取滚动条。

那时候，我想在div上添加边框，以使内容继续在底部边框以下。

这是代码的非常简化的版本：

<html>
<head>

<style>
    .will-get-border {
        /* border: 1px solid black; // <-- only if height >= 100px */
        max-height: 100px;
        overflow: auto;
    }
</style>

<script>
    function AddListItem() {
        var ul = document.getElementById('unorderedList');
        var li = document.createElement('li');
        li.innerHTML = 'This is a list item.';
        ul.appendChild(li);
    }
</script>

</head>
<body>

<div class="will-get-border">
    <ul id="unorderedList"></ul>
</div>

<input type="button" onclick="AddListItem()" value="Add list item" />
</body>
</html>

像这样的东西我需要SASS还是LESS？

Answer 1

说实话，您应该使用javascript处理！
这个过程是如此简单，场景就像是当您想向其中添加元素时，需要添加如下条件：

if(el.count > 5) { // also you can get the parent element and check the `max-height` property of it
  // do some stuff, in your case set the max height to the parent element like
  const parent = document.querySelector('.parentEl')
  parent.style.maxHeight = yourMaxHeihgtValue
}

或者您可以检查元素maxheihgt是否大于您的目标阈值，如下所示：

const parent = document.querySelector('.parentEl')
const targetMaxHeight = parent.style.maxHeight

if( targetMaxHeight >= thresholdValue ) {
   // set the parent max height to the threshold value
   parent.style.maxHeight = yourMaxHeihgtValue
}

请注意，您必须在每次添加时都运行此代码，方法是将其包装到函数中并在AddListItem函数内部调用。

如何仅在特定条件下添加样式？

1 个答案: