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

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

Linklerin Renklerini Değiştirme Örnek

YouTube Reklam Engelleyici

Eski tarayıcılarda kod gizleme ve kod satırını bölme Javascript

HTML Resimler

HTML bdo Etiketi Örnek