1

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

2
  • Вы хотите изменить позицию кнопки и задать её размеры при помощи js, верно?
    – Denis640Kb
    16 мар 2020 в 11:01
  • Хоть js, хоть html, это не суть важно.Они могут меняться и динамически во время сеанса, если надо, я отредактирую метки и напишу: html, js, css и т.д. и т.п. Спасибо за помощь, мой юный друг!!! 16 мар 2020 в 11:12

1 ответ 1

6

К сожалению, юным меня уже никак не назвать, но спасибо за комплемент. )
Для того, чтобы указать ширину и высоту и кнопки и 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>

2
  • Вот это я и искал. Благо Весть. 16 мар 2020 в 11:37
  • @Sevastopol' Ха ))) Спасибо. Тоже улыбнуло ) Комплимент воистину приятный )
    – Denis640Kb
    16 мар 2020 в 11:51

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.