Javascript İle Class - Style veya Değer Değiştirme/Ekleme

+ -
+2

Herkese merhaba arkadaşlar.
Bu konumuzda sizlere sayfa içerisinde aktif olarak stilleri, classları veya kod içi değerleri değiştirebileceğimiz seçenekleri göstereceğiz.

- Öncelikli olarak değişilkil yapacağımız bölgeyi seçmemiz gerekiyor; bunu javascriptte değişik yöntemlerle yapabiliriz.

var x = document.getElementById("varluk");
id="varluk" şeklinde işaretlenen kod bölmesini seçeriz.(x'e tanımlarız.)
var x = $('#varluk');
Yukarıdaki işlevin aynısıdır.
var x = document.getElementsByClassName("varluk");
class="varluk" şeklinde işaretlenen kod bölmesiniz seçeriz.(x'e tanımlarız.)
var x = $('.varluk');
Yukarıdaki işlevin aynısıdır.
(Function içerisinde kullanımlarda document.getElements ile seçim yapmanız daha faydalıdır.)

- Daha sonra ise bu seçtiğimiz değişkenlerde ne tür değişiklikler yapabiliriz onara bakalım;

 - appendChild();
 Belirtilen bölümün içerisine istenilen veriyi oluşturur.
 - innerHTML;
 Belirtilen bölüm içine istenilen yazıyı yazar.
 - attr; Belirtilen bölüm içerisine veri ekleyip düzenleyebilir.
 - style; Seçilen bölüm içerisine style="" kodu ekler ve içerisini doldurur.
 - src; Seçilen bölümde src="" içerisinde veri ekletip düzenletebilir.

 - Kullanım yöntemleri;
<body>
<button onclick="olustur()">Oluştur</button> <!-- Tıklandıkça ekranda <div>Bacalı gemi geliyor.</div> terimini oluşturur. -->
<button onclick="yazdir()">Yazdir</button> <!-- Tıklandığında test idsine sahip bölümdeki verileri siler ve "Bacalı gemi geliyor." yazdırır. -->
<br>
<img src="https://www.premium-turk.net/uploads/premiumturk.png" onclick="rekle()" 
 style="width:100px" />
<br>
<div style="border:3px solid #666;height:20px;width:80px;">
<div onclick="gri()" style="background-color:#aaa;width:20px;height:20px;float:left;"></div>
<div onclick="mavi()" style="background-color:rgb(0, 153, 204);width:20px;height:20px;float:left;"></div>
<div onclick="kirmizi()" style="background-color:rgb(222, 0, 9);width:20px;height:20px;float:left;"></div>
<div onclick="turuncu()" style="background-color:rgb(255, 136, 0);width:20px;height:20px;float:left;"></div>
</div>
<div id="test"></div>
<img id="resim" style="width:50%"/>
</body>
<script>
   //Div oluşturup Değer Verme
function olustur(){
   var varluk = document.createElement("div"); // <div></div> tagı oluşturup değişkene tanımlıyoruz.
   varluk.appendChild(document.createTextNode("Bacalı gemi geliyor.")); // ilk satırda oluşturduğumuz div içerisine "Bacalı gemi geliyor." yazdırırız ve değişkende hala tanımlı bırakırız.
   document.getElementById("test").appendChild(varluk);
}
  // innerHTML Kullanımı
function yazdir(){
   document.getElementById("test").innerHTML = "Bacalı gemi geliyor."; // id'si test olan içeriğin içerisindeki veriler de silinecektir.
}
  // src ile resim gönderme
function rekle(){
   document.getElementById("resim").src = "https://www.premium-turk.net/uploads/premiumturk.png";
}
  // attr ile style,src işlemlerini de yapabilirsiniz.
  // attr ile class değiştirerek efektif görsel sağlama
function gri(){ $('body').attr("class", "gri"); }
function mavi(){ $('body').attr("class", "mavi"); }
function kirmizi(){ $('body').attr("class", "kirmizi"); }
function turuncu(){ $('body').attr("class", "turuncu"); }
</script>
<style>
.gri{ background-color: #aaa; }
.mavi{ background-color: rgb(0, 153, 204); }
.kirmizi{ background-color: rgb(222, 0, 9); }
.turuncu{ background-color: rgb(255, 136, 0); }
</style>
  - Hata ve eklentileri bildirin.





Yorumlar 0

Bilgilendirme
Yorum Ekleyebilmeniz için Sitemize Kayıt Olmanız Gerekmektedir.