主页 / 问题 / 1095278
Accepted
Arthur Alunts
Asked:2020-03-16 18:40:35 +0000 UTC2020-03-16 18:40:35 +0000 UTC

如何设置按钮的坐标和尺寸？

  • 772

有button：现在如何设置它的参数，以像素为单位的大小和以像素为单位的绝对坐标（分数或整数）？

对TextArea.

这是我能做的：

<!DOCTYPE html>
<meta charset="utf-8">
<button onclick="upd()">New Game!!!</button><br>
<textarea rows="5" cols="30" id="T1"></textarea>
<title>My Project 1.0.0.1</title>
<html>
<script src="https://d3js.org/d3.v5.min.js"></script>
<style>
  html,
  body {
    overflow-y: hidden;
  }
</style>

<body>
  <script>
    function upd() {}
  </script>
</body>

</html>

javascript

1 个回答

  1. Best Answer

    可惜，我已经不能称得上年轻了，不过还是谢谢你的夸奖。)
    为了指定按钮和文本区域的宽度和高度，您可以使用css.
    例如，您可以指定不同显示系统中每个元素的宽度和高度，从像素到百分比以及fr. 如有必要，
    您还可以使用 设置绝对定位。cssdisplay

    <!DOCTYPE html>
<meta charset="utf-8">
<title>My Project 1.0.0.1</title>
<html>
<script src="https://d3js.org/d3.v5.min.js"></script>
<style>
    html,body{
        overflow-y:hidden;
    }
    button{
        position: absolute;
        width: 200px;
        height: 20px;
    }
    textarea{
        position: absolute;
        width: 200px;
        height: 50px;
    }
</style>
<body>

<button onclick="upd()">New Game!!!</button><br>
<textarea rows="5" cols="30" id="T1"></textarea>
</body>
</html>

    要设置其在页面上的位置，您可以使用margin，padding或简单地通过top和指定参数left。

    <!DOCTYPE html>
<meta charset="utf-8">
<title>My Project 1.0.0.1</title>
<html>
<script src="https://d3js.org/d3.v5.min.js"></script>
<style>
    html,body{
        overflow-y:hidden;
    }
    button{
        position: absolute;
        width: 200px;
        height: 20px;
        top: 100px;
        left: 200px;
    }
    textarea{
        position: absolute;
        width: 200px;
        height: 50px;
        top: 200px;
        left: 300px;
    }
</style>
<body>

<button onclick="upd()">New Game!!!</button><br>
<textarea rows="5" cols="30" id="T1"></textarea>
</body>
</html>
<script>
    function upd() {
        
    }
</script>

    如果你想通过获取位置数据js并改变元素的位置坐标和大小，那么你可以用同样的方式修改和改变css。

        function upd() {

    }
    window.onload = function () { // При загрузке страницы (Можно поменять на любое удобное событие для Вас)
        let button = document.getElementsByTagName('button')[0]; // Получаем элементы по тегу button берём из них первый(Так же можно получать по классам, по id и так далее)
        let coord = button.getBoundingClientRect(); // Получаем координаты элемента
        let x = coord.x; // Координаты по оси x
        let y = coord.y; // Координаты по оси y
        let width = coord.width; // Получаем ширину элемента
        let height = coord.height; // Получаем высоту элемента
        // Теперь зная координаты и размер блока Вы можете менять его размеры и расположение уже относительно текущего положения, если надо просто задать данные, то координаты можно не получать.

        button.style.position = "absolute"; // Задаём абсолютно позиционирование
        button.style.width = '200px'; // Устанавливаем ширину элемента (Зная координаты текущего элемента, Вы можете его передвигать уже в соответствии с его координатами, или задавать ширину или высоту в зависимости от текущих данных)
        button.style.height = '20px'; // Устанавливаем высоту элемента (Зная координаты текущего элемента, Вы можете его передвигать уже в соответствии с его координатами, или задавать ширину или высоту в зависимости от текущих данных)
        button.style.top = '200px'; // Делаем отступ сверху (Зная координаты текущего элемента, Вы можете его передвигать уже в соответствии с его координатами, или задавать ширину или высоту в зависимости от текущих данных)
        button.style.left = '200px'; // Делаем отступ слева (Зная координаты текущего элемента, Вы можете его передвигать уже в соответствии с его координатами, или задавать ширину или высоту в зависимости от текущих данных)
    }
// Тоже самое можно проделать с textarea
    <!DOCTYPE html>
<meta charset="utf-8">
<title>My Project 1.0.0.1</title>
<html>
<script src="https://d3js.org/d3.v5.min.js"></script>
<style>
    html,body{
        overflow-y:hidden;
    }
</style>
<body>

<button onclick="upd()">New Game!!!</button><br>
<textarea rows="5" cols="30" id="T1"></textarea>
</body>
</html>

    • 6

相关问题