JQuery – HTML Tagın Style Yapısına Müdahale

Web projelerinde işleyiş genellikle web tasarımlarıyla başlamakta ardından yazılımsal olarak devam etmektedir.Haliyle tasarlanan tema renksel ve yapısal olarak statik bir fizilsellik göstermektedir.Bazı durumlarda site temalarında dinamik olarak renksel ya da yapısal değişiklikler olması gerekmektedir.Eee sırf böyle bir işlem için Server Hide’da kod yazıp sunucuya ağırlık vermektense JQuery kütüphanesinin bizlere verdiği nimetten yararlanmak hem işten hem de performanstan kazandıracaktır.Şimdi gelin JQuery ile Client tabanlı olarak HTML taglarında style yapısına nasıl müdahale ediliyormuş beraber, teferruatlıca inceleyelim.

Öncelikle bu makalede JQuery ile HTML taglarında style yapısına müdahaleyi irdeleyelim derken, bir web sitesinin kaynak kodunda bulunan bütün HTML kodlarına müdahaleden bahsediyorum.<body>, <p>, <div>, <span> vs. HTML kodlarına JQuery ile style müdahalesini kast ettiğimi belirtmek isterim.

jQuery İle HTML tagların style yapısına ulaşmamızı sağlayan kodun prototipi aşağıdaki gibidir.

	$("tag").css("css özelliği","değer")

Gördüğünüz gibi bir taga CSS style müdahalesinde bulunurken o tagın CSS özelliğini yazıp, ardından değerini vermemiz yeterli olacaktır.Bu şekilde kod çalıştırıldığı zaman önceki style yapısını tarayıcı ezecek ve yeni verilen style özellikleri ekranda gösterilecektir.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="js/jquery-2.0.2.min.js"></script>
<script type="text/javascript">
function Uygula()
{
	$("p").css("color","Orange");
	}
</script>
</head>
<body>
<p>
Bu bir paragraftır.
</p>
<br />
<input type="submit" value="Uygula" onclick="Uygula()" />
</body>
</html>

Yukarıdaki kod parçacığından gördüğünüz gibi Uygula isimli fonksiyon tetiklendiği anda <p> tagının style yapısı değiştirilecek ve içindeki yazının rengi turuncu olacaktır.
Eğer sayfada birden fazla <p> tagı mevcutsa bu işlem hepsi için geçerli olacaktır.
Eğer <p> tagına birden fazla sitil değişikliği uygulamak istiyorsak aşağıdaki gibi işlem gerçekleştirebiliriz.

function Uygula()
{
	$("p").css("color","Orange");
	$("p").css("width","200px");
    $("p").css("text-align","center");
	}

Eğer ki sayfamızda hem <p> hemde <body> taglarının sitillerine müdahale etmek istersek aşağıdaki gibi kod yazabiliriz.

function Uygula()
{
	$("p").css("color","Orange");
	$("p").css("width","200px");
    $("p").css("text-align","center");
	$("body").css("background-color","Black");
	}

Burada gördüğünüz gibi Uygula fonksiyonu tetiklendiği zaman farklı taglara sitil değişikliği uygulanacaktır.Lakin bu taglar dışında kalan tagların hiçbirinde değişiklik söz konusu olmayacaktır.

jQuery ile HTML taglarının style yapılarına bu şekilde basit işlemlerle müdahale edebiliyoruz.

Sonraki yazılarımda görüşmek üzere…
İyi çalışmalar…

Bunlar da hoşunuza gidebilir...

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

*