HTML Div Nedir?
<div> etiketi, diğer sayfa öğelerini içine alan ve HTML belgesini bölümlere ayıran bir konteyner biriminden başka bir şey değildir. Web geliştiricileri HTML öğelerini gruplandırmak ve aynı anda birçok öğeye CSS stilleri uygulamak için <div> öğelerini kullanır.
Diğer bir ifade ile HTML DIVelemenleriti, her hangi bir yüksekliği olmayan varsayılan olarak bulunduğu alan içinde blok(block) olarak görünen nesneler denilebilir.
Div Elementini Boyutlandırma
Diğer HTML elementleri gibi div elementide CSS kullanılarak biçimlendirmek mümkündür. CSS ile bir div elementinin yüksekliğini değiştirmek için height özelliği, genişliğini değiştirmek için de width özelliği kullanılır. Aşağıdaki örnekte genişlik ve yükseklik değerleri ile renk değeri değiştirilmiştir.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <!DOCTYPE html> <head> <style> div{ width: 250px; height: 150px; background-color:#00b894; } </style> </head> <body> <div></div> </body> </html> |
Çıktı:
JavaScript ile HTML Div Boyutlandırma
Genellikle CSS ile boyutlandırma yapılmasına rağmeni bazı durumlarda javascript ile nesnelerin genişlik ve yükseklik değerleri değiştirilmek istenebilir. Bunun için elementlerin style özelliği ile tüm CSS tanımlamalarını yapabilirsiniz. Aşağıdaki örnekte bulunan butonile boyutları 20×20 px olan bir divin genişliğini 100×100 px olarak değiştirecektir.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | <!DOCTYPE html> <head> <style> div{ width: 20px; height: 20px; background-color:#00b894; } </style> </head> <body> <div id="kutu"></div> <button id="btn">Div Boyut Değiştir</button> <script> const btn=document.querySelector("#btn"); const kutu=document.querySelector("#kutu"); btn.onclick=function(){ //div genişliğini değiştirme kutu.style.width="100px"; //div yüksekliğini değiştirme kutu.style.height="100px"; } </script> </body> </html> |
Çıktı:
Yorum Yap