Süper Üye
Merhaba değerli üyelerimiz, bugün sizlere açık kaynak javascript kütüphanesi olarak bilinen JQuery ile HTML etiketlerinin parametre değerlerini değiştirmeyi göstereceğim.
HTML:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#button1").click(function(){
var genislik=$("#tablom").attr("width");
$("#sonuc1").text(genislik);
});
$("#button2").click(function(){
var girilen=$("#kutu1").val();
$("#tablom").attr("width",girilen);
});
$("#button3").click(function(){
var renk=$("#tablom").attr("bgcolor");
$("#sonuc2").text(renk);
});
$("#button4").click(function(){
var secilenRenk=$("#renkler").val();
$("#tablom").attr("bgcolor",secilenRenk);
});
$("#button5").click(function(){
var genislik=$("#tablom").attr("width");
genislik-=25;
$("#tablom").attr("width",genislik);
});
$("#button6").click(function(){
var genislik=parseInt($("#tablom").attr("width"));
genislik+=25;
$("#tablom").attr("width",genislik);
});
});
</script>
</head>
<body>
<p>
<button id="button1">Genişliği Göster</button> <b id="sonuc1"></b>
</p>
<p>
<input name="kutu1" type="text" id="kutu1" value="300" size="4" maxlength="3"> <button id="button2">Genişliği Ayarla:</button>
</p>
<p>
<button id="button3">Arkaplan Rengini Göster</button> <b id="sonuc2"></b>
</p>
<p>
<select id="renkler" name="renkler">
<option value="Red">Kırmızı</option>
<option value="Yellow">Sarı</option>
<option value="Pink">Pembe</option>
</select>
<button id="button4">Rengi Ayarla:</button>
</p>
<p>
<button id="button5">Genişliği Azalt -25px</button> <button id="button6">Genişliği Artır +25px</button>
</p>
<table id="tablom" width="380" bgcolor="#00CCCC" border="1" cellspacing="0" cellpadding="5">
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>
