仅当div的高度大于特定量时才显示边框

Question

假设我的div最大身高为350px。

大于此高度的任何内容，div将overflow带滚动条。

现在如果我想在没有滚动条时显示边框，我将如何实现。

感谢。

Answer 1

使用JQuery相对简单：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>
    $(document).ready(function(){
       if ($('#yourDiv').height() < 350) {//AS YOU ASK, UNDER 350PX
            $('#yourDiv').css("border-color", "red");
            $('#yourDiv').css("border-style", "solid");
       }
    });
</script>

<div id="yourDiv" style="height:349px;">
     <p> your div will have red border because of height being under 350px</p>
</div>

Answer 2

不要认为只有CSS才有可能。

但是，您可以使用var mydiv = document.querySelectorAll('.test'); for (var i = 0; i <= mydiv.length -1 ; i++) { var scrollHeight = mydiv[i].scrollHeight; if (scrollHeight < 350) { mydiv[i].classList.add('border'); } }属性。

.test{
  max-height: 350px;
  overflow: auto;
}

.border{
  border: 1px solid black;
}

<div class="test">
	I'm Boredered because i have no overflow <br>
	I'm Boredered because i have no overflow <br>
	I'm Boredered because i have no overflow <br>
</div>
<br>
<div class="test">
	I'm Borederless because i have overflow <br>
	I'm Borederless because i have overflow <br>
	I'm Borederless because i have overflow <br>
	I'm Borederless because i have overflow <br>
	I'm Borederless because i have overflow <br>
	I'm Borederless because i have overflow <br>
	I'm Borederless because i have overflow <br>
	I'm Borederless because i have overflow <br>
	I'm Borederless because i have overflow <br>
	I'm Borederless because i have overflow <br>
	I'm Borederless because i have overflow <br>
	I'm Borederless because i have overflow <br>
	I'm Borederless because i have overflow <br>
	I'm Borederless because i have overflow <br>
	I'm Borederless because i have overflow <br>
	I'm Borederless because i have overflow <br>
	I'm Borederless because i have overflow <br>
	I'm Borederless because i have overflow <br>
	I'm Borederless because i have overflow <br>
	I'm Borederless because i have overflow <br>
	I'm Borederless because i have overflow <br>
	I'm Borederless because i have overflow <br>
	I'm Borederless because i have overflow <br>
	I'm Borederless because i have overflow <br>
	I'm Borederless because i have overflow <br>
	I'm Borederless because i have overflow <br>
	I'm Borederless because i have overflow <br>
	I'm Borederless because i have overflow <br>
	I'm Borederless because i have overflow <br>
	I'm Borederless because i have overflow <br>
	I'm Borederless because i have overflow <br>
	I'm Borederless because i have overflow <br>
	I'm Borederless because i have overflow <br>
	I'm Borederless because i have overflow <br>
</div>

to_entries

Answer 3

使用媒体查询css：

#TestDiv{
        overflow: scroll;
    }

@media only screen and (max-width: 350px) {
    #TestDiv{
        overflow: hidden;
    }
}