我试图在Chrome中使用HTML编辑网页的宽度和高度，使用按钮

I'm trying to edit the width and height of a webpage in Chrome with HTML, using buttons

本文关键字：按钮 高度 网页 HTML Chrome 编辑      更新时间：2023-09-26

考虑我目前的代码:

<!DOCTYPE html>
<html>
<body>

<input id="but" name="but" type=Button onclick="changeBCol();" value="Shuffle Background Colour"></input>
<br></br>
<button style="background-color:transparent;width:255;height:255" onclick = "w = w+1">Window width up</button>
<br></br>
<button style="background-color:transparent;width:255;height:255">Window width down</button>
<br></br>
<button style="background-color:transparent;width:255;height:255">Window height up</button>
<br></br>
<button style="background-color:transparent;width:255;height:255">Window height down</button>
<script>
var w = window.innerWidth
</script>
</html>
</body>

目前还不能使用，如有任何建议，我将不胜感激。

因为您只是更改变量w的值(它不包含引用但包含值)，而不是窗口的宽度或高度。另外你只能改变宽度&我不认为这是一个好主意，试图改变窗口的宽度&但是如果你想这样做，可以考虑使用window.resizeTo()。

+:

  1. 将<br></br>改为<br>, <input></input>改为<input>。它们是void元素，没有结束标签。
  2. 内层为内层，外层为外层:应该是<html>...<body>...</body></html>。
  3. 你应该指定<button> s的类型，因为默认是type="submit"。
<标题> 例子
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="author" content="K.">
        <title>Demo</title>
    </head>
    <body>
        <div id="demoButtons">
            <button id="incWidth" type="button">Increase its width</button>
            <button id="decWidth" type="button">Decrease its width</button>
            <button id="incHeight" type="button">Increase its height</button>
            <button id="decHeight" type="button">Decrease its height</button>
        </div>
        <script>
            let width = 100, height = 100;
            childWindow = window.open("", "", "width=100, height=100");
            childWindow.focus();
            document.getElementById("demoButtons").addEventListener("click", event => {
                    console.log(event.target.id);
                    /**/ if(event.target.id === "incWidth") width += 100;
                    else if(event.target.id === "decWidth" && width >= 100) width -= 100;
                    else if(event.target.id === "incHeight") height += 100;
                    else if(event.target.id === "decHeight" && height >= 100) height -= 100;
                    console.log(width, height);
                    childWindow.resizeTo(width, height);
                    childWindow.document.textContent = `The width: ${width}, the height: ${height}.`;
                    childWindow.focus();
                });
        </script>
    </body>
</html>
相关文章：