给div设置宽度，规定不能超过某宽度，小于此宽度则自适应

最新推荐文章于 2022-10-08 15:47:10 发布

haibin_hu

最新推荐文章于 2022-10-08 15:47:10 发布

阅读量4.4k

点赞数

本文链接：https://blog.csdn.net/haibin_hu/article/details/11491073

版权

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>无标题页</title>
    <script type="text/javascript">
        function ShowMessage() {
            var strcontent = '等你，我已等了很久！母亲常对我说：“儿呀！你也老大不小了，还不成家呢！要不到时我连孙子都抱不动了！”母亲希望我赶紧成家有个老婆，有个孩子，有个幸福美满的家庭。可她哪里知道，我在等你呢！';
            var div1 = document.getElementById("div1");
            div1.innerText = strcontent;
            div1.style.display = "block";
            if (div1.clientWidth > 400) {//内容宽度超过400时，设置其宽度为400，根据内容多少自适应，最多不超过400
                div1.style.width = "400px";
            }
            //alert(div1.clientWidth);
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <input type="button" value="点击添加内容" οnclick="ShowMessage()" />
        <div id="div1" style="width:auto;height:auto; position:absolute; top:0px; left:0px; display:none"></div>//这里设置宽度自适应，高度自适应
    </div>
    </form>
</body>
</html>

function HiddenDiv()
    {
       document.getElementById("OuterDiv").style.display='none';//最好在隐藏的时候 将宽度设置为auto（自适应）
       document.getElementById("OuterDiv").style.width='auto';
    }

haibin_hu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
给div设置宽度，规定不能超过某宽度，小于此宽度则自适应

无标题页 function ShowMessage() { var strcontent = '等你，我已等了很久！母亲常对我说：“儿呀！你也老大不小了，还不成家呢！要不到时我连孙子都抱不动了！”母亲希望我赶紧成家有个老婆，有个孩子，有个幸福美满的家庭。可她哪里知道，我在等你呢！'; var div1 = document.
复制链接

扫一扫