Как задать координаты и размеры button?

Question

Имеется 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>

Answer 1

К сожалению, юным меня уже никак не назвать, но спасибо за комплемент. )
Для того, чтобы указать ширину и высоту и кнопки и textarea, Вы можете воспользоваться css.
К примеру, ширина и высота каждого элемента Вы можете указать в разных системах отображения, от пикселей до процентов и fr.
Так же при помощи css Вы можете задать абсолютное позиционирование при необходимости при помощи свойства display.

<!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>

БЛОГ НА HUSL

Как задать координаты и размеры button?

Ответы (1 шт):