<\/div>\n
\u00d6nceki yaz\u0131lar\u0131mda bir id ve tag\u0131n jQuery ile style yap\u0131s\u0131n\u0131n nas\u0131l de\u011fi\u015ftirildi\u011fini incelemi\u015ftik.\u015eimdi ise bir Class yap\u0131s\u0131n\u0131n style yap\u0131s\u0131n\u0131 de\u011fi\u015ftirmeyi inceleyece\u011fiz.
\n
\nYaz\u0131m\u0131z\u0131n ana konusunu \u015fekillendirirken a\u015fa\u011f\u0131daki HTML yap\u0131dan yararlanaca\u011f\u0131z.<\/p>\n
\r\n<html>\r\n<head>\r\n<meta http-equiv="Content-Type" content="text\/html; charset=utf-8" \/>\r\n<\/head>\r\n<body>\r\n<div class="gorunumclass">Merhaba, J\u00fcpiter<\/div>\r\n<input type="submit" value="De\u011fi\u015ftir" \/>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\nBurada g\u00f6rd\u00fc\u011f\u00fcn\u00fcz gibi “gorunumclass” isminde bir Class yap\u0131s\u0131na sahip bir “<div>” nesnemiz ve bir adette “De\u011fi\u015ftir” isminde butonumuz mevcut.Butonumuza t\u0131kland\u0131\u011f\u0131 zaman jQuery ile “gorunumclass” Class de\u011ferine sahip HTML nesnelerin style yap\u0131lar\u0131n\u0131 de\u011fi\u015ftirece\u011fiz.<\/p>\n
\r\n<html>\r\n<head>\r\n<meta http-equiv="Content-Type" content="text\/html; charset=utf-8" \/>\r\n<script type="text\/javascript" src="js\/jquery-2.0.2.min.js"><\/script>\r\n<script type="text\/javascript">\r\nfunction Degistir()\r\n{\r\n\t\t$(".gorunumclass").css("width","355px");\r\n\t\t$(".gorunumclass").css("color","#C03");\r\n\t\t$(".gorunumclass").css("border-style","ridge");\r\n\t\t$(".gorunumclass").css("font-size","24px");\r\n\t}\r\n<\/script>\r\n<\/head>\r\n<body>\r\n<div class="gorunumclass">Merhaba, J\u00fcpiter<\/div>\r\n<input type="submit" value="De\u011fi\u015ftir" onclick="Degistir();" \/>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\nYukar\u0131daki kod par\u00e7ac\u0131\u011f\u0131nda “gorunumclass” Class de\u011ferine sahip HTML nesnelerinin style yap\u0131lar\u0131na jQuery ile m\u00fcdahale etmi\u015f olduk.\u015eimdide a\u015fa\u011f\u0131daki kod par\u00e7ac\u0131\u011f\u0131n\u0131 inceleyelim.<\/p>\n
\r\n<html>\r\n<head>\r\n<meta http-equiv="Content-Type" content="text\/html; charset=utf-8" \/>\r\n<script type="text\/javascript" src="js\/jquery-2.0.2.min.js"><\/script>\r\n<script type="text\/javascript">\r\nfunction Degistir()\r\n{\r\n\t\t$(".gorunumclass").css("width","355px");\r\n\t\t$(".gorunumclass").css("color","#C03");\r\n\t\t$(".gorunumclass").css("border-style","ridge");\r\n\t\t$(".gorunumclass").css("font-size","24px");\r\n\t}\r\n<\/script>\r\n<\/head>\r\n<body>\r\n<div class="gorunumclass">Merhaba, J\u00fcpiter<\/div>\r\n<span class="gorunumclass">Merhaba, Sat\u00fcrn<\/span>\r\n<div class="gorunumclass">Merhaba, Uran\u00fcs<\/div>\r\n<p class="gorunumclass">Merhaba, Neett\u00fcn<\/p>\r\n<input type="submit" value="De\u011fi\u015ftir" onclick="Degistir();" \/>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\nBurada da g\u00f6rd\u00fc\u011f\u00fcn\u00fcz gibi birden fazla “gorunumclass” Class de\u011ferine sahip nesnemiz mevcuttur.jQuery ile Class yap\u0131lar\u0131na m\u00fcdahale etti\u011fimiz i\u00e7in “Degistir” isimli fonksiyonumuz tetiklendi\u011fi zaman t\u00fcm “gorunumclass” Class de\u011ferine sahip HTML nesneleri(farkl\u0131 nesnelerde olsa) bu m\u00fcdahaleden etkileneceklerdir.<\/p>\n
jQuery – Bir ID’nin Style Yap\u0131s\u0131na M\u00fcdahale<\/a> ba\u015fl\u0131kl\u0131 makalemizden hat\u0131rlarsan\u0131z e\u011fer, birden fazla ayn\u0131 id de\u011ferine sahip HTML nesneleri teknik olarak m\u00fcmk\u00fcn olamad\u0131\u011f\u0131ndan dolay\u0131 jQuery mimarisi ilk e\u015fle\u015fen id de\u011ferinin style yap\u0131s\u0131na m\u00fcdahale ediyordu.Anlatmak istedi\u011fim Class yap\u0131s\u0131nda b\u00f6yle bir durum s\u00f6z konusu de\u011fildir, bilakis t\u00fcm nesneler style de\u011fi\u015fikli\u011finden etkilenecektir.<\/p>\n
\u0130yi \u00e7al\u0131\u015fmalar dilerim…<\/p>\n","protected":false},"excerpt":{"rendered":"
\u00d6nceki yaz\u0131lar\u0131mda bir id ve tag\u0131n jQuery ile style yap\u0131s\u0131n\u0131n nas\u0131l de\u011fi\u015ftirildi\u011fini incelemi\u015ftik.\u015eimdi ise bir Class yap\u0131s\u0131n\u0131n style yap\u0131s\u0131n\u0131 de\u011fi\u015ftirmeyi inceleyece\u011fiz.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[19],"tags":[68,748,595],"class_list":["post-2890","post","type-post","status-publish","format-standard","hentry","category-jquery","tag-class","tag-jquery","tag-style"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/2890","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/comments?post=2890"}],"version-history":[{"count":0,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/2890\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/media?parent=2890"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/categories?post=2890"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/tags?post=2890"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}