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

Bu blogdaki popüler yayınlar

Linklerin Renklerini Değiştirme Örnek

HTML Element Referansları

HTML main Etiketi

HTML yorum etiketi ile öğe gizleme örneği

Html dersleri

javascript açıklama satırı

HTML5 Canvas Oyun Yapımı Dersleri

Uyurken Bile Para Kazanmak İster misin

CSS content Özelliği