Mengubah atribut gaya elemen secara dinamis menggunakan JavaScript

117

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?

javascript html css

— jslearner
sumber

123

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 ...

— David Hedlund
sumber

213

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

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

— KooiInc
sumber

3

Saya juga, ini benar-benar berguna untuk fungsi dinamis, seseorang dapat melewatkan gaya sebagai nilai string, kemudian mengatur gaya dan nilai. Solusi yang bagus.

— raphie

1

Selain itu, menambahkan apa yang dikatakan @raphie, Anda juga dapat menggunakan document.getElementById("xyz").style["paddingTop"] = '10px'.

— Sikat gigi

1

@anunkjn: Anda benar. Saya akan mengatakan itu tidak berfungsi lagi di FF. Yang, yah ... aneh.

— KooiInc

17

Saya menyelesaikan masalah serupa dengan:

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

Semoga membantu.

— chairul
sumber

2

Kerugian dari melakukan cara ini adalah Anda mendapatkan padding untuk sisi lain yang disetel 0. Dan terkadang Anda tidak menginginkannya.

— Gustavo Straube

17

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');

— icl7126
sumber

15

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

— JohnP
sumber

1

Seperti yang dinyatakan dalam jawaban yang diterima, ada beberapa pengecualian. Suka float.

— Gustavo Straube

8

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

akan

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

— T.Todua
sumber

7

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

— rjbultitude.dll
sumber

7

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";

— Rama
sumber

5

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

juga akan melakukan pekerjaan itu.

— Pinkesh Badjatiya
sumber

5

Kelemahan dari melakukan cara ini adalah Anda mendapatkan gaya sebaris lainnya dihapus. Itu karena Anda mengganti seluruh nilai atribut. Saya kira mendapatkan gaya saat ini, memeriksa nilai yang ada untuk properti yang ingin Anda tetapkan, dan kemudian menambahkan / mengganti dengan nilai yang diinginkan adalah solusi yang lebih baik.

— Gustavo Straube

Sepakat. Tetapi OP membutuhkan solusi yang lebih dekat dengan apa yang sudah dia lakukan yang tidak memperhitungkan kasus penggunaan Anda. Ini adalah salah satu cara termudah untuk mencapainya, tetapi ini pasti bukan yang terbaik.

— Pinkesh Badjatiya

@GustavoStraube, saya tidak akan menyebutnya sebagai kerugian. Dalam banyak kasus, inilah yang sebenarnya ingin dilakukan pengembang - yaitu menimpa gaya elemen. Saya akan menyebutnya sebagai konsekuensi melakukannya dengan cara ini.

— stwr667

5

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

bekerja untuk saya

— Hyperion
sumber