js隐藏多行显示多行

JavaScript026

js隐藏多行显示多行,第1张

显示省略号。js隐藏多行显示多行为显示省略号。多行溢出隐藏显示省略号功能的JS实现，在页面重构中，经常需要将过多的内容隐藏而显示部分，在单行文本中实现非常简单，但是在多行文本中，则需要根据实际选择不同的方式显示。

：获取元素，判断点击，如果DIV显示就隐藏，如果DIV隐藏就显示出来。

1 if(DIV是显示的){

2 div.style.display='none'

3 }

4 else{

5 div.style.display='block'

6 }

代码：

style:

1 <style>

2 #text{display:blockwidth:300pxcursor:pointerheight:20pxborder:solid 1px #CCC}

3 #menu{display:nonewidth:300pxheight:100pxborder:solid 1px #CCC}

4 </style>

js:

<script type="text/javascript">

window.onload=function(){

var wenzi=document.getElementById('text')

var div=document.getElementById('menu')

wenzi.onfocus=function(){

if(div.style.display=='block'){ // == 判断div.display是否为显示

div.style.display='none'//= 赋值也可了解成改变

}

else{

div.style.display='block'

}

}

}

</script>

html

<span id="text">点击显示菜单，再点击隐藏菜单</span>

<div id="menu">这是文字哦。</div>