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

HTML Metin Biçimlendirme Etiketleri

HTML em Etiketi

CSS justify-content Özelliği

HTML table Etiketi

HTML hr Etiketi

CSS align-items özelliği

HTML menu Etiketi

CSS flex-basis Özelliği

HTML embed Etiketi

CSS content Özelliği