#javascript #html
Вопрос:
Я попытался изменить все отступы html-элемента с помощью js, например:
const pd = 1
document.getElementsByClassName('board')[0].style.paddingRight = pd 'px'
document.getElementsByClassName('board')[0].style.paddingLeft = pd 'px'
document.getElementsByClassName('board')[0].style.paddingTop = pd 'px'
document.getElementsByClassName('board')[0].style.paddingBottom = pd 'px'
но он устанавливает отступ в 1 пиксель.
Если одна из строк удалена, например.:
const pd = 1
document.getElementsByClassName('board')[0].style.paddingRight = pd 'px'
document.getElementsByClassName('board')[0].style.paddingTop = pd 'px'
document.getElementsByClassName('board')[0].style.paddingBottom = pd 'px'
другие значения установлены правильно.
Кто-нибудь может объяснить, почему это происходит и как я могу это исправить?
Комментарии:
1. «он устанавливает отступ в 1 пиксель». Вот что делает ваш код. В чем проблема? Я этого не вижу. Редактировать: если там указано, что заполнение равно 1px, без указания стороны, это означает «со всех сторон».
2. Вы узнаете об этом, посмотрев на средства разработки вашего браузера? Если вы посмотрите на стили, вы увидите отступ: 1 пиксель с чем-то вроде маленькой стрелки рядом с ним. Нажмите на это, и оно развернется, чтобы показать вам все четыре значения, прописанные. Или посмотрите на вычисленные стили, которые дадут вам список всех значений стилей. Здесь нечего исправлять.
3. удален css-тег, который был бы для
.board:first-of-type{padding:var(--pd)}
Ответ №1:
Потому что я не могу комментировать, поэтому я пытаюсь ответить
Можете ли вы показать мне результаты своих тестов и что вы хотите
В вашем скрипте javascript нет ничего плохого
Если вы хотите изменить все отступы, почему бы и нет
selector.style.padding = "1px"
Или
Selector.style.padding = "1px 1px 1px 1px"
По какой причине вы так много печатаете? 🤔
Комментарии:
1. действительно, следует просто сделать лучшую попытку ответить и не задавать оператору никаких вопросов или вообще не отвечать. если вы просто ответите, то вас могут поддержать, а затем, когда у вас будет достаточно репутации, вы сможете задавать вопросы в комментариях
2. Да, я понимаю это, сэр, и я думаю, что мой ответ также может немного ответить на вопрос
Ответ №2:
Когда вы задаете одно и то же значение (в вашем примере 1 пиксель) для следующих свойств CSS: padding-bottom , padding-left , padding-right , padding-top (все стороны) — это то же самое, что padding: 1px; .
Более того, если вы установите одно и то же значение (например , 2px) для padding-right и padding-left , и одно и то же значение для padding-top и padding-bottom (например, 1px) — вы увидите padding: 1px 2px ;
Отрывок:
var pd = 1;
var pd2 = 2;
document.getElementsByClassName('board')[0].style.paddingTop = pd 'px'
document.getElementsByClassName('board')[0].style.paddingRight = pd2 'px'
document.getElementsByClassName('board')[0].style.paddingBottom = pd 'px'
document.getElementsByClassName('board')[0].style.paddingLeft = pd2 'px' <div class="board">board</div> Проверьте диаграмму этого MDN, чтобы увидеть все комбинации.
Ответ №3:
Это связано с тем, что вы передаете целое число вместо строки, чтобы изменить свойство заполнения, вы должны использовать строку.
Есть много способов решить эту проблему, но если все отступы одинаковы, просто измените свойство заполнения.
Измените константу на строку:
const pd = '1';
document.getElementsByClassName('board')[0].style.padding = pd;
«1» по умолчанию принимается за 1 пиксель, если вы хотите указать другие показатели, напишите их, например «1em», «1%» и т. Д.
Кроме того, вы можете использовать
document.querySelector('.board')
чтобы выбрать первый элемент с классом доски, вместо этого выберите все и измените по индексу