Mengubah atribut gaya elemen secara dinamis menggunakan JavaScript

Saya memiliki style sheet tertentu untuk div. Sekarang saya ingin memodifikasi satu atribut div secara dinamis menggunakan js.

Bagaimana saya bisa melakukannya?

document.getElementById("xyz").style.padding-top = "10px";

Apakah ini benar?

Hampir benar.

Karena -ini adalah operator javascript, Anda tidak dapat menggunakannya di nama properti. Jika Anda menyetel, borderatau menggunakan kata-kata tunggal seperti itu, kode Anda akan berfungsi dengan baik.

Namun, hal yang perlu Anda ingat padding-top, dan untuk setiap nama atribut yang diberi tanda hubung, adalah bahwa di javascript, Anda menghapus tanda hubung, dan membuat huruf besar berikutnya, jadi dalam kasus Anda itu akan menjadi paddingTop.

Ada beberapa pengecualian lainnya. JavaScript memiliki beberapa kata yang telah dipesan, jadi Anda tidak dapat mengatur floatseperti itu, misalnya. Sebaliknya, di beberapa browser Anda perlu menggunakan cssFloatdan di browser lainnya styleFloat. Untuk perbedaan seperti ini, Anda disarankan menggunakan kerangka kerja seperti jQuery, yang menangani ketidakcocokan browser untuk Anda ...

Selain jawaban lain, jika Anda ingin menggunakan tanda hubung untuk properti gaya, Anda juga dapat menggunakan:

document.getElementById("xyz").style["padding-top"] = "10px";

Saya menyelesaikan masalah serupa dengan:

document.getElementById("xyz").style.padding = "10px 0 0 0";

Semoga membantu.

Ada juga style.setPropertyfungsi:
https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration/setProperty

document.getElementById("xyz").style.setProperty('padding-top', '10px');

// version with !important priority
document.getElementById("xyz").style.setProperty('padding-top', '10px', 'important');

Dengan asumsi Anda memiliki HTML seperti ini:

<div id='thediv'></div>

Jika Anda ingin mengubah atribut gaya div ini, Anda akan menggunakan

document.getElementById('thediv').style.[ATTRIBUTE] = '[VALUE]'

Ganti [ATTRIBUTE]dengan atribut gaya yang Anda inginkan. Ingatlah untuk menghapus '-' dan membuat huruf berikut menjadi besar.

Contoh

document.getElementById('thediv').style.display = 'none'; //changes the display
document.getElementById('thediv').style.paddingLeft = 'none'; //removes padding

document.getElementById("xyz").style.padding-top = '10px';

akan

document.getElementById("xyz").style["paddingTop"] = '10px';

Saya akan merekomendasikan menggunakan fungsi, yang menerima id elemen dan objek yang berisi properti CSS, untuk menangani ini. Dengan cara ini Anda menulis beberapa gaya sekaligus dan menggunakan sintaks properti CSS standar.

//function to handle multiple styles
function setStyle(elId, propertyObject) {
    var el = document.getElementById(elId);
    for (var property in propertyObject) {
        el.style[property] = propertyObject[property];
    }
}

setStyle('xyz', {'padding-top': '10px'});

Lebih baik lagi Anda bisa menyimpan gaya dalam variabel, yang akan membuat manajemen properti lebih mudah misalnya

var xyzStyles = {'padding-top':'10px'}
setStyle('xyz', xyzStyles);

Semoga membantu

Terkejut karena saya tidak melihat solusi cara pemilih kueri di bawah ini ,

document.querySelector('#xyz').style.paddingTop = "10px"

Solusi CSSStyleDeclaration , contoh jawaban yang diterima

document.getElementById('xyz').style.paddingTop = "10px";

document.getElementById("xyz").setAttribute('style','padding-top:10px');

juga akan melakukan pekerjaan itu.

document.getElementById('id').style = 'left: 55%; z-index: 999; overflow: hidden; width: 0px; height: 0px; opacity: 0; display: none;';

bekerja untuk saya