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 progress Etiketi

CSS content Özelliği

HTML section Etiketi

CSS transition-delay Özelliği

CSS align-items özelliği

CSS text-justify Özelliği

CSS justify-content Özelliği

CSS border-collapse Özelliği

CSS overflow Özelliği

CSS top Özelliği