Web sayfası içerisinde stil düzenlemeleri için genellikle Css kulllanıyoruz. Böylece sayfa görünümünü istediğimiz şekilde düzenleyebiliyoruz. Fakat bazı durumlarda sayfa içersindeki elemanların sitillerine Javascript ile müdehale etmemiz gerekebilir. Bu yazımızda javascript ile yazıyı hizalama nasıl yapılır inceleyeceğiz.
Css text-align Özelliği
Css text-align özelliği içerisinde metin bulunan elementlerin içeriğinin yatay hizalanması için kullanılır. Aldığı değerler ve ne işe yaradığı aşağıdaki gibidir.
- left metini sola dayalı göstermek için kullanılır.
- right metini sağa dayalı göstermek için kullanılır.
- center yazıyı bulunduğu yere göre ortalayarak göstermek için kullanılır.
- justyf yazıyı iki kenara hizalayarak gösterir.
Örnek kullanımı aşağıdaki gibidir.
<h1 style="text-align: left">başlık burada</h1>
<p style="text-align: center;">içerik burada</p>
<div style="text-align: rihgt;">içerik burada</div>Javascript Yazıyı Ortalama
Javascript ile bir elementin sitil bilgisini değiştirmek için elementin style özelliği kullanılır. Biz elementin metin hizalama yani textAlign özelliğini kullanarak yazıyı ortalayacağız.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<h1 id="baslik">Lorem ipsum dolor</h1>
<div id="icerik">Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque, omnis expedita! Error vero maxime qui velit, dolorem totam quas!</div>
<script>
const baslikDOM = document.getElementById("baslik");
const icerikDOM = document.getElementById("icerik");
icerikDOM.style.textAlign = "center";
baslikDOM.style.textAlign = "center";
</script>
</body>
</html>Yukarıdaki örneğimizi bir html dosyası olarak kayıt ederek çalıştırdığımızda, başlık ve içerik bölümünün sayfa içerisinde ortalandığını görüyoruz. Bunu yaparken sırasıyla şunları yaptık.
- Önce document.getElementById metodu ile elementi seçtik. Diğer yöntemlerde kullanılabilirdi.
- Sonra seçilen elemenin style.textAlign özelliğine center değer atandı.
- Bu işlemler sayfanın sonunda, yani elementler sayfaya yüklendikten sonra yapıldı.
- Bu işlemler sonucunda elementin hizalama değeri center olduğu için sayfa içerisinde ortalanmış oldu.
Javascript Yazıyı Sağa Hizlamak
Eğer Javascript ile yazıyı sağa yaslamak istiyorsak, elementin sytle.textAlign özelliğini right yapmamız gerekiyor. Şimdi örneğimize geçelim.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<h1 id="baslik">Lorem ipsum dolor</h1>
<div id="icerik">Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque, omnis expedita! Error vero maxime qui velit, dolorem totam quas!</div>
<script>
const baslikDOM = document.getElementById("baslik");
const icerikDOM = document.getElementById("icerik");
icerikDOM.style.textAlign = "right";
baslikDOM.style.textAlign = "right";
</script>
</body>
</html>Örneğimizi çalıştırdığımızda başlık ve yazının sağa doğru hizalandığını görüyoruz.
Javascript Yazıyı Sola Hizalama
Html etiketlerinin genel durumu yazıyı sola dayalı göstermektir. Bazı durumlarda sitil bilgilerinden dolayı, sağa dayalı veya ortalanmış olarak hizalanmış olabilir. Bu gibi durumlarda sola hizalamak için elementin style.textAlign özelliğine left değerini atamamız gerekiyor.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<h1 id="baslik" style="text-align: center">Lorem ipsum dolor</h1>
<div id="icerik" style="text-align: center">Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque, omnis expedita! Error vero maxime qui velit, dolorem totam quas!</div>
<script>
const baslikDOM = document.getElementById("baslik");
const icerikDOM = document.getElementById("icerik");
icerikDOM.style.textAlign = "left";
baslikDOM.style.textAlign = "left";
</script>
</body>
</html>Örneğimizde varsayılan olarak ortalanmış olarak atanmış başlık ve içerik bilgisini, Javascript ile sola dayıyoruz. Bunun için elementlerin style.textAlign özellikleri left yapılmıştır.
Sonuç
Javascript ile bir web sayfası içerisindeki elementlerin sitil bilgilerini manipüle edebiliyoruz. Bunun için elementin style özelliğini kullanıyoruz. Yazıyı hizalamak için ise style.textAlign özelliğini değiştirmemiz yeterli olacaktır.
Javascript ile DOMa müdahale ederken en çok hangi özellikleri kullanıyorsunuz?