如何用原生js制作标题与内容保持4行的效果代码分享
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了如何用原生js制作标题与内容保持4行的效果代码分享,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含4008字,纯文字阅读大概需要6分钟。
内容图文
![如何用原生js制作标题与内容保持4行的效果代码分享](/upload/InfoBanner/zyjiaocheng/300/eee4c53fb97944979fa86217ba5ca0d8.jpg)
实现的原理:给标题和内容分别加上行高,获取标题的高度除以自身的行高,得知标题的行数,再分配内容的行数即可。
<style> *{padding: 0;margin: 0; font-family: 'Microsoft Yahei'} .book{ width: 320px; border: 1px solid #ccc; } .bookli{ padding: 5px 10px; border-bottom: 1px solid #ccc; } .bookdiv{ width: 300px; overflow: hidden; } .title{ color:#666; margin: 10px 0; line-height: 23px; //标题的行高 } .desc{ line-height: 23px; //内容的行高 overflow: hidden; } </style>
<h2>十大名花排行榜</h2> <div class="book"> <ul> <li class="bookli"> <div class="bookdiv"> <h4 class="title">好一朵魅力的茉莉花</h4> <p class="desc">茉莉花,别名:茉莉,拉丁文名:木犀科、素馨属直立或攀援灌木,高达3米。小枝圆柱形或稍压扁状,有时中空,疏被柔毛。叶对生,单叶,叶片纸质,圆形、椭圆形、卵状椭圆形或倒卵形,两端圆或钝,基部有时微心形,在上面稍凹入或凹起,下面凸起,细脉在两面常明显,微凸起,除下面脉腋间常具簇毛外,其余无毛;裂片长圆形至近圆形,先端圆或钝。果球形,呈紫黑色。</p> </div> </li> <li class="bookli"> <div class="bookdiv"> <h4 class="title">好一朵魅力的茉莉花好一朵魅力的茉莉花好一朵魅力的茉莉花</h4> <p class="desc">茉莉花,别名:茉莉,拉丁文名:木犀科、素馨属直立或攀援灌木,高达3米。小枝圆柱形或稍压扁状,有时中空,疏被柔毛。叶对生,单叶,叶片纸质,圆形、椭圆形、卵状椭圆形或倒卵形,两端圆或钝,基部有时微心形,在上面稍凹入或凹起,下面凸起,细脉在两面常明显,微凸起,除下面脉腋间常具簇毛外,其余无毛;裂片长圆形至近圆形,先端圆或钝。果球形,呈紫黑色。</p> </div> </li> <li class="bookli"> <div class="bookdiv"> <h4 class="title">好一朵魅力的茉莉花好一朵魅力的茉莉花好一朵魅力的茉莉花好一朵魅力的茉莉花好一朵魅力的茉莉花</h4> <p class="desc">茉莉花,别名:茉莉,拉丁文名:木犀科、素馨属直立或攀援灌木,高达3米。小枝圆柱形或稍压扁状,有时中空,疏被柔毛。叶对生,单叶,叶片纸质,圆形、椭圆形、卵状椭圆形或倒卵形,两端圆或钝,基部有时微心形,在上面稍凹入或凹起,下面凸起,细脉在两面常明显,微凸起,除下面脉腋间常具簇毛外,其余无毛;裂片长圆形至近圆形,先端圆或钝。果球形,呈紫黑色。</p> </div> </li> <li class="bookli"> <div class="bookdiv"> <h4 class="title">好一朵魅力的茉莉花</h4> <p class="desc">茉莉花,别名:茉莉,拉丁文名:木犀科、素馨属直立或攀援灌木,高达3米。小枝圆柱形或稍压扁状,有时中空,疏被柔毛。叶对生,单叶,叶片纸质,圆形、椭圆形、卵状椭圆形或倒卵形,两端圆或钝,基部有时微心形,在上面稍凹入或凹起,下面凸起,细脉在两面常明显,微凸起,除下面脉腋间常具簇毛外,其余无毛;裂片长圆形至近圆形,先端圆或钝。果球形,呈紫黑色。</p> </div> </li> </ul> </div>
window.onload=function(){ //兼容不能使用getElementsByClassName的浏览器 function getClass(clas){ var cls=document.getElementsByTagName('*'); var arr=[]; for(var i=0;i<cls.length;i++){ if(clas==cls[i].className){ arr.push(cls[i]); } } return arr; } //控制行数的函数 function controlRow(title,content){ var title=getClass(title); var desc=getClass(content); var titleheight; var descheight; for(var j=0;j<title.length;j++){ (function(index){ // 获取css样式 if(window.getComputedStyle!="undefined"){ //兼容火狐、谷歌等主流浏览器 titleheight=window.getComputedStyle(title[index],null)['line-height']; descheight=window.getComputedStyle(desc[index],null)['line-height']; }else{ //兼容ie浏览器 titleheight=title[index].currentStyle['line-height']; descheight=desc[index].currentStyle['line-height']; } var titleH=titleheight.substr(0,titleheight.length-2); var descH=descheight.substr(0,descheight.length-2); // 如果标题高度=行高,那么内容高度则是内容行高的3倍,内容+标题总是保持4行 if(title[index].offsetHeight/titleH==1){ desc[index].style.height=3*descH+'px'; }else if(title[index].offsetHeight/titleH==2){ desc[index].style.height=2*descH+'px'; }else if(title[index].offsetHeight/titleH==3){ desc[index].style.height=1*descH+'px'; }else{ alert("sorry,浏览器不兼容"); } })(j); } } controlRow('title','desc'); }
测试了谷歌和火狐。ie被我卸了一个文件,打不开。所以没测试。有测试的朋友也可以告诉我一声,谢啦。
以上就是如何用原生js制作标题与内容保持4行的效果代码分享的详细内容,更多请关注Gxl网其它相关文章!
内容总结
以上是互联网集市为您收集整理的如何用原生js制作标题与内容保持4行的效果代码分享全部内容,希望文章能够帮你解决如何用原生js制作标题与内容保持4行的效果代码分享所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。