javascript 设置宽度百分比更新

📌 相关文章

📜 javascript 设置宽度百分比更新 - Javascript (1)

📅 最后修改于: 2023-12-03 15:01:46.374000 🧑 作者: Mango

在web开发中，我们经常需要在页面中动态地更新元素的宽度。一种常见的需求是将一个元素的宽度设置为父元素宽度的百分比，而且这个百分比需要在页面加载后根据父元素的实际宽度来动态计算。下面介绍一种使用javascript实现这种需求的方法。

HTML结构

首先我们需要一个HTML结构，这里以一个简单的div为例：

<div class="parent">
  <div class="child"></div>
</div>

其中，父元素的class名为parent，子元素的class名为child。

CSS样式

为了让父元素的宽度能够被javascript获取，我们需要在CSS样式中将其宽度设置为一个百分比值，这里以80%为例：

.parent {
  width: 80%;
  height: 100px;
  border: 1px solid black;
}

.child {
  width: 100%;
  height: 50%;
  background-color: red;
}

其中，子元素的宽度和高度都分别设置为100%和50%。

Javascript代码

下面就是javascript的部分代码了，首先获取父元素的引用：

var parent = document.querySelector(".parent");

然后获取父元素的实际宽度：

var parentWidth = parent.clientWidth;

最后将子元素的宽度设置为父元素宽度的百分比值：

var child = document.querySelector(".child");
child.style.width = (parentWidth * 0.8) + "px";

注意这里要将计算出来的百分比值转化为像素值（px）。

完整代码

<!DOCTYPE html>
<html>
<head>
  <title>Javascript设置宽度百分比更新</title>
  <style>
    .parent {
      width: 80%;
      height: 100px;
      border: 1px solid black;
    }

    .child {
      width: 100%;
      height: 50%;
      background-color: red;
    }
  </style>
</head>
<body>
  <div class="parent">
    <div class="child"></div>
  </div>

  <script>
    var parent = document.querySelector(".parent");
    var parentWidth = parent.clientWidth;
    var child = document.querySelector(".child");
    child.style.width = (parentWidth * 0.8) + "px";
  </script>
</body>
</html>

这样，页面加载后子元素的宽度就会自动根据父元素的实际宽度进行动态计算和更新了。