html中使用js实现内容过长时部分

最新推荐文章于 2022-06-01 10:04:46 发布

dianle9968

最新推荐文章于 2022-06-01 10:04:46 发布

阅读量201

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/Faquir/p/5807322.html

版权

html中使用js实现内容过长时部分

有时数据内容太长时我们并不希望其全部显示出来，因为这样可能会导致用于显示这些内容的标签被撑开影响美观。

这时就希望能够实现默认只显示部分内容，在鼠标放上去的时候再将全部的内容显示出来。

这里提供一个简单的实现方法，通过将全部内容放在单独一个标签中，通过控制这个标签的显示与隐藏实现此效果。

html页面中创建一个table，用于存放默认的数据，在需要显示更多数据的td中新建一个div用于显示所有数据（可以放在任何期望的位置）。

这里通过样式控制此div的显示与隐藏。

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>过长内容隐藏</title>
        <style type="text/css">
            td{
                width:200px;
                border:1px solid #000;
            }
            .fullData{
                display:none;
            }
            #userDesp:hover .fullData{
                position:absolute;
                display:block;
                cursor:hand;
                word-break: break-all;
                width:200px;
                background-color: rgba(0,0,0,0.5);
                color:#fff
            }
        </style>
</head>
<body>
<table>
    <tr>
        <td>用户名</td>
        <td>简介</td>
    </tr>
    <tr>
        <td>userName</td>
        <td id="userDesp">
            鼠标置于此查看详情
            <div class="fullData">
                这时用户简介，比较长，所以把其他内容给隐藏了，鼠标放上来就能看见了哦。
            </div>
        </td>
    </tr>
</table>
</body>
</html>

如果需要js控制显示与隐藏，可以使用onmouseover和onmouseout这两个事件。

给td中添加这两个事件，

<td onmouseover="showDetails(this)" onmouseout="closeDetails(this)">
            鼠标置于此查看详情
            <div style="display:none">
                这时用户简介，比较长，所以把其他内容给隐藏了，鼠标放上来就能看见了哦。
            </div>
</td>

然后在js部分写上需要控制的div的样式。

<script type="text/javascript">
        function showDetails(o){
            o.getElementsByTagName("div").item(0).style.cssText = "position:absolute; display:block;cursor:hand; word-break: break-all;width:200px;background-color: rgba(0,0,0,0.5);color:#fff";
        }

        function closeDetails(o){
            o.getElementsByTagName("div").item(0).style.cssText = "display:none";
        }
</script>