如何在javascript中更改div中文本的字体大小

Question

我有一个网格，在一些网格项div中，文本太长。我已经添加了文本溢出：省略号、空白：nowrap和溢出：隐藏。这样可以防止文本按预期溢出。但我想尝试的是检测是否有溢出，如果有，请减小字体大小。

下面是我尝试的JavaScript。基本上，它应该遍历所有数据行，如果检测到溢出，则更改字体大小。它不一定是Javascript，但我认为这将是我实现这一目标的最佳机会。但是代码没有更改字体大小，有人能帮我更改字体大小吗？在Javascript、jQuery、CSS等中

document.addEventListener('DOMContentLoaded', function() {
//the div is called data_row adn tehy are dynamically generated
var text_size = document.getElementsByClassName('data_row');
for (var i = 0; i < text_size.length; i++) {
if (text_size.scrollWidth > text_size.clientWidth) {
//i also tried a specific font size ex. 12px
text_size.style.fontSize = "small";
}
}
});
.data_row {
text-align: center;
border: 1 px solid;
line-height: 25 px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}

Answer 1

您的变量text_size实际上是某种数组。如果你想访问样式等，你必须参考text_size[i]。

干杯。

Answer 2

function change(){
const text = document.getElementById('text');
text.style.fontSize='36px';
}

<p id="text" style="font-size: 16px">lorem ipsum ...</p>
<button onclick="change()">change</button>