Div Boyutlandırma – Tasarım Kodlama
CSS HTML

Div Boyutlandırma

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.

Çıktı:

HTML Div Boyutlandırma 1

HTML Div Boyutlandırma 1

 

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.

Çıktı:

div boyutlandırma

div boyutlandırma

 

 

Yorum bırak