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

时间：2023-03-08 22:01:47
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>

这样就可以实现简单的隐藏与显示了。

相关文章