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