jQuery – Bir Nesnenin İçinde Bulunan Nesnenin Style Yapısına Müdahale Etmek
jQuery ile html nesnelerinin style yapılarına rahatlıkla müdahale edebiliyor ve hatta CSS özelliklerindeki değerleri okuyabiliyorduk.Peki bir html nesnesi içinde bulunan farklı ya da benzer başka bir nesnenin style yapısına nasıl müdahale edilebilir diye merak ediyorsanız bu yazımızda sorunuza cevap bulabilirsiniz.
<html> <head> </head> <body> <input id="Tikla" type="submit" value="Tıkla" /> <div id="AnaNesne"> <input id="AltNesne1" type="month" value="Ay" /> <br> <a id="AltNesne2" href="#">Link</a> </div> </body> </html>
Yukarıdaki kod bloğunu incelerseniz eğer bir adet “AnaNesne” id değerine sahip bir “div” nesnesi mevcuttur.Bu “div” nesnesi içerisinde birer adet “AltNesne1” id değerine sahip “input” nesnesi ve “AltNesne2” id değerine sahip “a” nesnesi mevcuttur.
Şimdi “Tikla” id değerine sahip butonumuza tıklandığı anda “AnaNesne” id değerine sahip “div” nesnemizin içindeki bulunan iki nesnemizinde jQuery ile style yapılarına müdahale edelim.
<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 Tikla()
{
$("#AnaNesne input").css("width",250);
$("#AnaNesne a").css("font-size",50);
}
</script>
</head>
<body>
<input onClick="Tikla();" id="Tikla" type="submit" value="Tıkla" />
<div id="AnaNesne">
<input id="AltNesne1" type="month" value="Ay" />
<br>
<a id="AltNesne2" href="#">Link</a>
</div>
</body>
</html>
Yukarıdaki kodun mantığı oldukça basit olduğundan dolayı açıklamaya lüzum görmüyorum.Örneği incelemeniz ve bir kereye mahsus tatbik etmeniz olayı idrak etmeniz için yeterli olacaktır.
İyi çalışmalar dilerim…
Teşekkürler