View Sidebar
jQuery ve CSS

jQuery ve CSS

Ekim 20, 2012 10:232 yorum


jQuery konusunda kendimi uzman olarak nitelendirebilirim. Ancak, gün geçtikçe şunu görüyorum ki, her yeni hazırladığım makalede ben de yepyeni şeyler öğreniyorum. Bu bağlamda bilgiyi paylaşmanın hazzını ve geri dönüşünü yaşıyorum.

Yepyeni, dinamik içeriğimle bu hafta da karşınızdayım. Bugünkü konuyu CSS, konumlandırma, yükseklik ve genişlik olarak 3 başlık altında ele alırken, genel hatlarıyla temel jQuery CSS işlemlerinden bahsediyor olacağım. Her zamanki gibi uygulamalı örneklerle konuları daha anlaşılır hale getirmek öncelikli görevim olacak.

Güzel bir giriş yazısından sonra lafı daha fazla uzatmadan konumuza giriş yapalım. 🙂

CSS

css( name )

Seçilen ilk elementin stil (style) parametresine ait değeri döndürür.

Örnek uygulama -> https://jsfiddle.net/icntfan/xXnwz/

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "https://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="https://code.jquery.com/jquery-latest.js"></script>

  <script>
  $(document).ready(function(){

    $("div").click(function () {
      var color = $(this).css("background-color");
      $("#sonuc").html("Bu kutu <span style='color:" +
                         color + ";'>" + color + "</span>.");
    });

  });
  </script>
  <style>
  div { width:60px; height:60px; margin:5px; float:left; }
  </style>
</head>
<body>
  <span id="sonuc"> </span>
  <div style="background-color:red;"></div>
  <div style="background-color:rgb(12,17,30);"></div>
  <div style="background-color:#555321;"></div>
  <div style="background-color:#a12;"></div>
</body>
</html>​

Bu kod parçasında, “var color = $(this).css(“background-color”);” ile arka plan rengini alıyoruz ve tıklamaya olayında, tıklanan kutunun rengini span elementine yazdırıyoruz.

css( properties )

Eşleşen tüm elementler için, belirtilen stil özelliklerinin değerlerini nesne olarak ayarlar.
Örnek uygulama -> https://jsfiddle.net/icntfan/NVG2s/

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "https://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="https://code.jquery.com/jquery-latest.js"></script>

  <script>
  $(document).ready(function(){

    $("p").hover(function () {
      $(this).css({'background-color' : 'red', 'font-weight' : 'bolder'});
    }, function () {
      var cssObj = {
        'background-color' : '#CCC',
        'font-weight' : '',
        'color' : 'rgb(0,40,244)'
      }
      $(this).css(cssObj);
    });

  });
  </script>
  <style>
  p { blue; }
  </style>
</head>
<body>
  <p>
    Fareniz ile paragrafın üstüne geliniz
  </p>
  <p>
    Fareniz ile paragrafın üstüne geliniz
  </p>
</body>
</html>​

Bu kodda ise, CSS özelliklerimizi bir nesneye dönüştürüp işlemlerimizi yapıyoruz.

css( name, value )

Seçilen elementler için, tek bir stil parametresi ayarlar.
Örnek uygulama -> https://jsfiddle.net/icntfan/WPPNC/

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "https://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="https://code.jquery.com/jquery-latest.js"></script>

  <script>
$(document).ready(function() {
    $("div").click(function () {
      $(this).css("background-color","blue");
      $(this).css("margin","50px");
      $(this).css("padding","10px");
      $(this).css("font-family","tahoma");
      $(this).html("Bu kutu artık mavidir.");
    });
});
  </script>
  <style>
  div { width:80px; height:80px; background-color:red; color: white; }
  </style>
</head>
<body>
    <div>Bu kutu kırmızıdır.</div>
</body>
</html>​

Gördüğünüz gibi “css(‘CSS_ozelligi’,’degeri’)” sayesinde istediğimiz elementin istediğimiz tek CSS özelliğini rahatlıkla değiştirebiliyoruz.

jQuery ve CSS konusunda aslında en çok işimize yarayacak başlığı da ele almış olduk. Gördüğünüz üzere, .css() ile tüm CSS işlemlerimizi rahatlıkla yapabiliyoruz.

Konumlandırma

offset( )

Seçilen ilk elemanın, belgeye göreceli olarak olan uzaklığını döndürür. Sadece görünen elementlerde çalışır.
Örnek uygulama -> https://jsfiddle.net/icntfan/8DN5C/

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "https://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="https://code.jquery.com/jquery-latest.js"></script>

  <script>
  $(document).ready(function(){
    var p = $("p:last");
var offset = p.offset();
p.html( "Sol: " + offset.left + ", Üst: " + offset.top );
  });
  </script>
  <style>
  p { margin-left:10px; }
  </style>
</head>
<body>
  <p>Merhaba</p><p>ikinci paragraf</p>
</body>
</html>​

“var offset = p.offset();” ile offset nesnemizi oluşturduktan sonra offset.left ve offset.top ile p elementinin sol ve üste olan uzaklığını bulmuş olduk.

offsetParent( )

Seçilen elemente en yakın olan ata elementi seçmemizi sağlar.
Örnek uygulama -> https://jsfiddle.net/icntfan/uzuTs/

<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-latest.js"></script>
</head>
<body>

    <ul class="seviye-1">
      <li class="item-i">I</li>
      <li class="item-ii" style="position: relative;">II
        <ul class="seviye-2">
          <li class="item-a">A</li>
          <li class="item-b">B
            <ul class="seviye-3">
              <li class="item-1">1</li>
              <li class="item-2">2</li>
              <li class="item-3">3</li>
            </ul>
          </li>
          <li class="item-c">C</li>
        </ul>
      </li>
      <li class="item-iii">III</li>
    </ul>

    <script>$('li.item-a').offsetParent().css('background-color', 'red');</script> <!-- Bu satır listedeki 2. itemin rengini değiştirecektir. -->

</body>
</html>​

“$(‘li.item-a’).offsetParent().css(‘background-color’, ‘red’)” Bu satır listedeki 2. itemin rengini değiştirecektir.

position( )

Seçilen elementin, bir üst seviyedeki elemente olan uzaklıklarını döndürür.
Örnek uygulama -> https://jsfiddle.net/icntfan/ZFc8x/

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "https://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="https://code.jquery.com/jquery-latest.js"></script>

  <script>
  $(document).ready(function(){
    var p = $("p:first");
var position = p.position();
$("p:last").text( "Sol: " + position.left + ", Üst: " + position.top );
  });
  </script>
  <style>
  div { padding: 15px;}
  p { margin-left:10px; }
  </style>
</head>
<body>
  <div><p>Selam</p></div><p></p>
</body>
</html>​

“var position = p.position();” ile position nesnemizi oluşturduktan sonra, position.left ve position.top ile üstteki elementin offset değerine göreceli olarak uzaklıkları alıyoruz.

scrollTop( ), scrollTop( val )

Bu fonksiyona parametre geçirilmediği zaman, seçilen elementin üst kısma olan kaydırma çubuğu (scroll) uzaklığını döndürür.
Parametre gönderdiğimizde ise, kaydırma çubuğunu belirlenen değere göre kaydırır.

Not: Bu fonksiyonlara ek olarak scrollLeft( ), scrollLeft( val ) fonksiyonları vardır. Kullanımları tamamen aynıdır.

Örnek uygulama -> https://jsfiddle.net/icntfan/GLVZx/

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "https://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="https://code.jquery.com/jquery-latest.js"></script>

  <script>
  $(document).ready(function(){
    $("div.deneme").scrollTop(50);

  });
  </script>
  <style>
div.deneme{
background:#CCCCCC none repeat scroll 0 0;
border:3px solid #666666;
margin:5px;
padding:5px;
position:relative;
width:500px;
height:300px;
overflow:auto;
}
  p { margin:10px;padding:5px;border:2px solid #666;width:1000px;height:1000px; }
  </style>
</head>
<body>
  <div class="deneme"><h1>Selam</h1><p>ikinci satır</p></div>
</body>
</html>​

Uygulamayı çalıştırdığımızda kaydırma çubuğunun pozisyonuna dikkat ediniz. Ekranda görmüş olduğunuz değer, kaydırma çubuğunun üstten kaç piksel kaydırıldığını gösteriyor.

Yükseklik ve Genişlik

height( ), height( val ) | width( ), width( val )

height( ) seçilen elementin hesaplanan yükseliğini döndürür.
height( val ) elementin yüksekliğini ayarlar.
width( ) seçilen elementin hesaplanan genişliğini döndürür.
width( val ) elementin genişliğini ayarlar.
Örnek uygulama -> https://jsfiddle.net/icntfan/PmWFD/

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "https://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="https://code.jquery.com/jquery-latest.js"></script>

  <script>
  $(document).ready(function(){

    $("div").one('click', function () {
      $(this).height(30)
             .css({cursor:"auto", backgroundColor:"green"});
      $(this).width(30);
      $("span").html("Yükseklik: "+$("div").height()+" Genişlik: "+$("div").width());
    });

  });
  </script>
  <style>
  div { width:50px; height:70px; float:left; margin:5px;
        background:rgb(255,140,0); cursor:pointer; }
  </style>
</head>
<body>
  <div></div>
  <span></span>
</body>
</html>​

Uygulamayı çalıştırdıktan sonra kutuya tıklayınız. Kodumuzda da görebileceğiniz üzere yapılan iş, basit bir yükseklik ve genişlik ayarlamak.

innerHeight( ), innerWidth( )

innerHeight seçilen elementin kenarlıklar hariç, padding değeri dahil yüksekliğini döndürür.
innerWidth seçilen elementin kenarlıklar hariç, padding değeri dahil genişliğini döndürür.
Örnek uygulama -> https://jsfiddle.net/icntfan/yAwwk/

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "https://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="https://code.jquery.com/jquery-latest.js"></script>

  <script>
  $(document).ready(function(){
    var p = $("p:first");
$("p:last").text( "innerHeight:" + p.innerHeight() + " | " + "innerWidth:" + p.innerWidth());

  });
  </script>
  <style>
  p { margin:10px; height: 50px; width: 250px; padding:5px;border:2px solid #666; }
  </style>
</head>
<body>
  <p>Merhaba</p><p></p>
</body>
</html>​

Ele aldığımız bu iki metodun çok faydalı olduğunu düşünüyorum. Gördüğünüz üzere çıktı, sadece element yükseklik + padding ve element genişlik + padding değeri oldu.

outerHeight( margin ), outerWidth( margin )

innerHeight seçilen elementin kenarlıklar ve padding değeri dahil yüksekliğini döndürür.
innerWidth seçilen elementin kenarlıklar ve padding değeri dahil genişliğini döndürür.
Margin ikilik değeri parametre olarak geçirildiği zaman, elementin CSS margin değeri de hesaplamaya dahil edilir.
Yükseklik için örnek uygulama -> https://jsfiddle.net/icntfan/9KRf7/

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "https://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="https://code.jquery.com/jquery-latest.js"></script>

  <script>
  $(document).ready(function(){
    var p = $("p:first");
$("p:last").text( "outerHeight:" + p.outerHeight() + " , outerHeight(true):" + p.outerHeight(true) );

  });
  </script>
  <style>
  p { margin:10px; height: 50px;padding:5px;border:2px solid #666; }
  </style>
</head>
<body>
  <p>Selam</p><p></p>
</body>
</html>​

“true” ikilik parametresini kullandığımız zaman, yüksekliğin margin değerleri dahil edilerek hesaplandığına dikkat ediniz.

Genişlik için örnek uygulama -> https://jsfiddle.net/icntfan/bJnYA/

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "https://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="https://code.jquery.com/jquery-latest.js"></script>

  <script>
  $(document).ready(function(){
    var p = $("p:first");
$("p:last").text( "outerWidth:" + p.outerWidth()+ " , outerWidth(true):" + p.outerWidth(true) );

  });
  </script>
  <style>
  p { margin:10px;width:250px;padding:5px;border:2px solid #666; }
  </style>
</head>
<body>
  <p>Selam</p><p></p>
</body>
</html>​

“true” ikilik parametresini kullandığımız zaman, genişliğin margin değerleri dahil edilerek hesaplandığına dikkat ediniz.

Faydalanılan kaynaklar:
1-) JQuery documentation -> CSS | https://docs.jquery.com/CSS

2 Yorum

Yanıtla Ulvi

Vazgeç