JS实现DIV盒子高度为宽度2倍

最新推荐文章于 2022-07-14 09:40:32 发布

一念之爱若来生

最新推荐文章于 2022-07-14 09:40:32 发布

阅读量3.2k

点赞数

分类专栏： JavaScript技术文章标签： javascript DIV 高度宽度

本文链接：https://blog.csdn.net/gangwan2433/article/details/50855576

版权

JavaScript技术专栏收录该内容

8 篇文章 0 订阅

订阅专栏

JS控制DIV高度，同理可实现控制DIV宽度变化。具体方法如下：

方法一：

<div id="div" style="width: 100px; background: #F90;">test</div>
<script type="text/javascript">
 var div = document.getElementById("div");
 var width=parseInt(div.style.width) || div.offsetWidth;
 div.style.height=width*2 + "px";
</script>

方法二：

<div id="div" style="width: 100px; background: #F90;">test</div>
<script type="text/javascript">
 var div = document.getElementById("div");
 var width=div.style.width.substr(0,div.style.width.length-2);
 div.style.height=width*2 + "px";
</script>