Question

嗨我觉得在尝试编辑div“box”的大小（宽度和高度）时，我遗漏了一些关键的东西。

当我想看到“box”div的高度或宽度值时，我可以使用getElementById找到宽度或高度，然后返回像素值。

document.getElementById("box").style.height ">> 200px"

尼斯。

但是，如果我想编辑该DIV中的像素数，则看起来200px返回的是字符串而不是数字，所以我无法添加或减去像素。

`document.getElementById("box").style.height += 200
>>"200px200"

document.getElementById("box").style.height += 200px
>>VM1143:1 Uncaught SyntaxError: Invalid or unexpected token

document.getElementById("box").style.height += "200px"
">>200px200px"`

我错过了什么，我无法编辑这个div的宽度和高度？添加和减去像素时是否需要删除“px”？

谢谢，以下是我正在使用的代码。

<!DOCTYPE html>
<html>
    <head>
        <title>
            Day 12 - Functions 2 Computation
        </title>

        <style>
            #box {
                width: 200px;
                height: 200px;
                background-color: black;
            }
        </style>
    </head>

    <body>
        <div id="group">
            <button id="bigger">Bigger</button>
            <button id="smaller">Smaller</button>
            <hr />
            <button id="blue">Blue</button>
            <button id="red">Red</button>
            <button id="green">Green</button>
            <div id="status"></div>
        </div>

        <div id="box" style="height: 200px; width: 200px"></div> <-- This one is giving me issues

        <script type="text/javascript">        </script>
    </body>
</html>

Answer 1

基本上是因为style.height返回的字符串不是int，所以如果你向它添加任何数字，它将导致错误。

您可以使用offsetHeight来获取元素的高度（减去边距但包括填充）

https://www.w3schools.com/jsref/prop_element_offsetheight.asp

（宽度为offsetWidth，但逻辑相同）

https://www.w3schools.com/jsref/prop_element_offsetwidth.asp

所以你的代码是：

var el = document.getElementById("box");
var height = el.offsetHeight;
var newHeight = height + 200;
el.style.height = newHeight + 'px';

Answer 2

你确实错过了至关重要的事情; document.getElementById("box").style.height会返回字符串，而不是整数。因此，您无法使用+=。

但是，您可以通过用document.getElementById("box").style.height = "300px";覆盖字符串来手动设置高度。

您还可以使用 element.offsetHeight 进行基于条件的调整：

＆＃13;

var the_box = document.getElementById("box");
var offset_height = the_box.offsetHeight;
var new_height = offset_height + 100;
the_box.style.height = new_height + 'px';

// OR

document.getElementById("box").style.height = document.getElementById("box").offsetHeight + 100 + 'px';

＆＃13;

#box {
  width: 200px;
  height: 200px;
  background-color: black;
}

＆＃13;

<div id="group">
  <button id="bigger">Bigger</button>
  <button id="smaller">Smaller</button>
  <hr />
  <button id="blue">Blue</button>
  <button id="red">Red</button>
  <button id="green">Green</button>
  <div id="status"></div>
</div>

<div id="box" style="height: 200px; width: 200px"></div>

＆＃13;

请注意，在进行调整后，您需要将px附加到高度的末尾，然后将其转换回基于像素的string。

希望这有帮助！：）

Answer 3

document.getElementById().style.width将返回一个有效的长度表达式，与内联样式声明相同。如果声明语法无效，那么它将不返回任何内容。元素的宽度或高度仅在百分比或具有一些长度单位时才有效。至于你的情况，你必须解析返回的值。比方说，您可以通过函数parseInt(document.getElementById("box").style.width,10)解析它。希望这可以帮到你。

调整高度和宽度样式;像素值以字符串形式出现

3 个答案: