Javascript 如何增加flex position元素的宽度和高度？_Javascript_Html_Reactjs

Javascript 如何增加flex position元素的宽度和高度？

javascript html reactjs

Javascript 如何增加flex position元素的宽度和高度？,javascript,html,reactjs,Javascript,Html,Reactjs,我有以下flex元素，它们可以根据内容采用不同的宽度，我想根据它们以前的宽度或高度增加它们的宽度和高度。例如，我想将10px添加到id为id_1的元素中，而不考虑其当前宽度注意：我可以只为样式添加一个宽度，并使其像300px那样增加宽度，但我不希望根据当前宽度增加宽度（width=previous_width+10）注意：我没有为元素样式提供以前的宽度值注意：我添加了背景色只是为了让它更容易理解注意：我使用的是reactjs，这只是一种简化，所以用react或javascript回答就

我有以下flex元素，它们可以根据内容采用不同的宽度，我想根据它们以前的宽度或高度增加它们的宽度和高度。例如，我想将

10px

添加到id为

id_1

的元素中，而不考虑其当前宽度

注意：我可以只为样式添加一个宽度，并使其像
```
300px
```
那样增加宽度，但我不希望根据当前宽度增加宽度（
```
width=previous_width+10
```
）
注意：我没有为元素样式提供以前的宽度值
注意：我添加了背景色只是为了让它更容易理解
注意：我使用的是
```
reactjs
```
，这只是一种简化，所以用react或javascript回答就可以了


文件
这应该有更长的宽度
第二
console.log（document.getElementById（'1'））
身体{
显示器：flex；
}
div{
背景颜色：橙色；
显示：块；
}
#id_1{
背景色：红色；
}

要执行此操作，您需要获取当前

元素的宽度
，并添加所需的值。对于元素的宽度
，我们必须查看它们的“真实”宽度
。有关元素宽度的更多信息，请参见

console.log（document.getElementById（'id_2'））
设seconddiv=document.getElementById（'id_2'）
函数增量（值）{
seconddiv.style.width=`${（seconddiv.offsetWidth+value*1）}px`
}
正文{
显示器：flex；
}
div{
背景颜色：橙色；
显示：块；
}
#id_1{
背景色：红色；
}
这应该有更长的宽度
第二
增加宽度
为此，您需要获取当前元素的宽度
，并添加所需的值。对于元素的宽度
，我们必须查看它们的“真实”宽度
。有关元素宽度的更多信息，请参见

console.log（document.getElementById（'id_2'））
设seconddiv=document.getElementById（'id_2'）
函数增量（值）{
seconddiv.style.width=`${（seconddiv.offsetWidth+value*1）}px`
}
正文{
显示器：flex；
}
div{
背景颜色：橙色；
显示：块；
}
#id_1{
背景色：红色；
}
这应该有更长的宽度
第二
增加宽度您可能需要javascript，或者如果您仍然想要使用css，可能需要“calc（）”css函数您可能需要javascript，或者如果您仍然想要使用css，可能需要“calc（）”css函数
<!DOCTYPE html>
<html lang="en">

<head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
</head>

<body>
      <div id='id_1'>this should have longer width</div>
      <div id='id_2'>second</div>

      <script>
            console.log(document.getElementById('1'))
      </script>

      <style>
            body {
                  display: flex;
            }

            div {
                  background-color: orange;
                  display: block;
            }

            #id_1 {
                  background-color: red;

            }
      </style>
</body>

</html>