【前端】input输入20-50的数值调整css行高

欣欣子Asen

于 2023-03-02 17:16:00 发布

阅读量140

点赞数

分类专栏：前端文章标签： html Powered by 金山文档

本文链接：https://blog.csdn.net/m0_58152080/article/details/129305016

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>

<script>
         function setlh(el) {
            if(el.value>50){
                        el.value = 50;
                    }
                    else if(el.value<=20){
                        el.value = 20;
                    }  
                        
             var a = el.value;
             var abc = document.getElementsByClassName('mytxt');
             Array.prototype.forEach.call(abc,function(ele){
             ele.style.lineHeight=a+'px';
         } 

          )
         }
</script>

<style>
.mytxt{ line-height:30px;}
 </style>


</head>
<body>
<input id="lh" onchange="setlh(this)" type="text" value="30"/>

<div class="mytxt">我是测试文本<br />我是测试文本<br />我是测试文本</div>
<div class="mytxt">我是测试文本2<br />我是测试文本2<br />我是测试文本2</div>

</body>
</html>