Mengubah Style CSS Float dengan Javascript

Halo para rekan Programmer.

 

Tepatnya tadi pagi dan beberapa waktu yang lalu, Saya memiliki permasalahan ketika akan mengakses style float dari suatu element HTML dengan menggunakan Javascript. Terus terang saja saya menemui jalan buntu, karena biasanya suatu properti style di CSS dapat di akses dengan mudah dengan rincian syarat seperti di bawah ini:

• Pada Javascript penulisan properti CSS tidak menggunakan tanda minus
• Setiap awal kata setelah karakter minus selalu diganti dengan huruf besar

Tabel Contoh

CSS	Javascript
background-color	backgroundColor
text-align	textAlign
font-size	fontSize
width	width
border-size	borderSize
-webkit-border-radius	WebkitBorderRadius

Berikut adalah beberapa contoh penulisan properti pada CSS yang dapat diakses dengan Javascript berdasarkan cara penulisan di atas.

 

Lihat Source Code

CSS: <a style="background-color:#ccc"> JS: element.style.backgroundColor='#ccc'; CSS: <b style="font-size:12px"> JS: element.style.fontSize='12px'; CSS: <span style="color:#000"> JS: element.style.color='#000'; CSS: <div style="-moz-box-shadow:0 0 5px #363"> JS: element.style.MozBoxShadow='0 0 5px #363';

1. CSS: 
2. <a style="background-color:#ccc"> 
3. JS: 
4. element.style.backgroundColor='#ccc'; 
5.  
6. CSS: 
7. <b style="font-size:12px"> 
8. JS: 
9. element.style.fontSize='12px'; 
10.  
11. CSS: 
12. <span style="color:#000"> 
13. JS: 
14. element.style.color='#000'; 
15.  
16. CSS: 
17. <div style="-moz-box-shadow:0 0 5px #363"> 
18. JS: 
19. element.style.MozBoxShadow='0 0 5px #363'; 

 

Tapi apa yang terjadi bila Kita akan mengubah atau mengakses properti float dengan menggunakan Javascript. Contoh berikut tidak akan berjalan sesuai dengan keinginan Kita:

 

Lihat Source Code

CSS: <div style="float:right"> JS: element.style.float='right';

1. CSS: 
2. <div style="float:right"> 
3. JS: 
4. element.style.float='right'; 

 

Ya, tidak ada efek apapun dengan menggunakan script javascript tersebut. Saya sudah mencoba di berbagai browser, baik itu Internet Explorer, Firefox, Opera, Chrome, bahkan Saya sudah menggunakan Firebug untuk melakukan cek apakah properti tersebut telah ter-set dengan benar. Aneh Bukan?

 

Setelah mencoba beberapa metode, dan bahkan saya biasanya menuliskan langsung pada tag nya dengan merubah HTML nya langsung agar masalah ini dapat diatasi, akhirnya Saya menemukan solusi untuk permasalahan yang satu ini.

 

Ternyata untuk mengakses properti float ini dalam Javascript, Kita harus menggunakan cssFloat pada object style. Lihat contoh berikut:

 

Lihat Source Code

var obj = document.getElementById("div1"); obj.style.cssFloat = "right";

1. var obj = document.getElementById("div1"); 
2. obj.style.cssFloat = "right"; 

 

Dengan script tersebut properti float dapat di ubah secara langsung dan tanpa masalah. Jadi permasalahannya, Kenapa satu properti itu beda dari properti-properti lain yang cara penulisannya sesuai dengan standard?

Posted in: Website tutorial