Javascript css order sitil atama

<!DOCTYPE html> <html> <head> <style> #anakutu { width: 300px; height: 150px; border: 1px solid black; display: -webkit-flex; display: flex; } #anakutu div { width: 50px; height:50px; } </style> </head> <body> <div id="anakutu"> <div style="background-color:coral;" id="kirmizi"></div> <div style="background-color:lightblue;" id="mavi"></div> <div style="background-color:lightgreen;" id="yesil"></div> <div style="background-color:pink;" id="pembe"></div> </div> <p>Aşağıdaki butona tıkladğınızda sıralama "yeşil-pembe-mavi-kirmizi" şeklinde olacaktır.</p> <button onclick="fonk()">Çalıştır.</button> <script> function fonk() { /* Code for Safari 6.1 and newer versions */ document.getElementById("kirmizi").style.WebkitOrder = "4"; document.getElementById("mavi").style.WebkitOrder = "3"; document.getElementById("yesil").style.WebkitOrder = "1"; document.getElementById("pembe").style.WebkitOrder = "2"; /* Standard syntax */ document.getElementById("kirmizi").style.order = "4"; document.getElementById("mavi").style.order = "3"; document.getElementById("yesil").style.order = "1"; document.getElementById("pembe").style.order = "2"; } </script>

Yorumlar

Popüler yayınlar

CSS content Özelliği

CSS justify-content Özelliği

Javascript ile neler yapılabilir

CSS top Özelliği

HTML strong Etiketi

Kriptopara nasıl alınır ve nereden alınır?

Ücretsiz Bitcoin Kazan Pasif Gelir Elde Et İnternetten Para Kazan

Javascript Oyun Yapma Dersleri HTML5+CSS3

CSS flex-basis Özelliği

HTML5 Canvas Oyun Yapımı Dersleri