Cuando establece el mismo valor (en su ejemplo, 1px) para las siguientes propiedades CSS: padding-bottom , padding-left , padding-right , padding-top (todos los lados), es lo mismo que padding: 1px; .

Además, si establece el mismo valor (por ejemplo, 2px) para padding-right y padding-left , y el mismo valor para padding-top y padding-bottom (por ejemplo, 1px), verá padding: 1px 2px ;

Retazo:

 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>

Consulte la tabla de este MDN para ver todas las combinaciones.

Eso es porque está pasando un número entero en lugar de una cadena, para cambiar la propiedad de relleno, debe usar una cadena.

Hay muchas formas de resolverlo, pero si todos los rellenos son iguales, simplemente modifique la propiedad de relleno.

Cambia tu const a cadena:

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

'1' se toma como 1px por defecto, si desea especificar otras métricas, escríbalas, como '1em', '1%', etc.

Además, puede utilizar

 document.querySelector('.board')

para seleccionar el primer elemento con clase de tablero en lugar de seleccionar todo y modificar por índice

Porque no puedo comentar, así que trato de responder.

¿Puedes mostrarme los resultados de tu prueba y qué quieres?

No hay nada malo con tu script javascript

Si quieres cambiar todo el relleno, ¿por qué no?

 selector.style.padding = "1px"

O

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

¿Cuál es la razón por la que escribes tanto? 🤔