为什么我无法分配所有填充值？

Question

我尝试用js改变html元素的所有填充，如:

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'

但是它设置padding为1px

如果其中一行被删除，例如:

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'

其他值设置正确

谁能解释一下为什么会发生这种情况，我该如何解决它?

Answer 1

因为我不能评论，所以我试着回答

你能给我看看你的测试结果吗?你想要什么?

你的javascript脚本没有问题

如果你想改变所有的填充，为什么不

selector.style.padding = "1px"

或

Selector.style.padding = "1px 1px 1px 1px"

你为什么打那么多字?🤔

Answer 2

当您为以下CSS属性设置相同的值(在您的示例中为1px)时:padding-bottom,padding-left,padding-right,padding-top(所有边)-与padding: 1px;相同。

此外，如果您为padding-right和padding-left设置相同的值(例如2px)，并为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的图表以查看所有组合。

Answer 3

那是因为你传递的是Integer而不是String，为了改变padding属性你应该使用String

有很多方法可以解决这个问题，但如果所有的padding都是相同的，那么只需修改padding属性。

将const改为string:

const pd = '1';
document.getElementsByClassName('board')[0].style.padding = pd;

'1'默认为1px，如果您想指定其他指标，然后写入，如'1em'， '1%'等。

也可以使用

document.querySelector('.board')

选择第一个具有board类的元素，而不是选择所有元素并按索引修改