SORU
19 ŞUBAT 2009, PERŞEMBE


Javascript ile CSS değiştirme Değerleri

Kolay javascript ile satır içi CSS değerlerini ayarlamak için. Genişliği değiştirmek istiyorum ve bu gibi html varsa:

<div style="width: 10px"></div>

Yapmam gereken:

document.getElementById('id').style.width = value;

Satır içi stil değerleri değiştirecek. Normalde bu satır içi stil stil geçersiz kılar, çünkü bu bir sorun değil. Örnek:

<style>
   #tId {
      width: 50%;
   }
</style>

<div id="tId"></div>

Bu Javascript kullanarak:

document.getElementById('tId').style.width = "30%";

Ben şu olsun:

<style>
   #tId {
      width: 50%;
   }
</style>

<div id="tId" style="width: 30%";></div>

Bu sadece zaman ve Eğer ben önce genişliğine baktığımda içi değerleri değiştirmek istiyorum, çünkü bir sorun var:

<div id="tId"></div>

Döndürülen değer Null olur, eğer öyleyse ben Javascript bilmesine gerek genişlikte bir şeyler yapmak için bazı mantık (artış genişliğine göre 1'i değil, belirli bir değer), geri Boş zaman beklerim dize "P'si" yok gerçekten işe.

Yani benim soru: satır içi, nasıl bu değerler alabilir miyim? bulunan bir CSS stil değerleri var Nasıl ınline değerleri yerine stil değiştir, kimliği belirli miyim?

CEVAP
19 ŞUBAT 2009, PERŞEMBE


Tamam, effictively peticular tarzı tüm unsurları bir anda değiştirecek kadar global CSS değiştirmek istediğiniz gibi. Son zamanlarda kendimi Shawn Olson tutorial bunu nasıl öğrendim. Doğrudan onun kodu here başvuru yapabilirsiniz.

İşte özeti:

document.styleSheets ile stylesheets alabilirsiniz. Aslında bu sayfa tüm stil bir dizi döndürür, ama document.styleSheets[styleIndex].href özelliği ile hangi söyleyebilirim. Düzenlemek istediğiniz stil sayfası bulduğunuzda, kuralları bir dizi almak gerekir. Bu "" ve "" diğer birçok tarayıcıda. cssRules IE kuralları denir Ne olduğunu anlamanın yolları selectorText özelliği gereğidir. Çalışan kod şöyle görünür:

var cssRuleCode = document.all ? 'rules' : 'cssRules'; //account for IE and FF
var rule = document.styleSheets[styleIndex][cssRuleCode][ruleIndex];
var selector = rule.selectorText;  //maybe '#tId'
var value = rule.value;            //both selectorText and value are settable.

Eğer herhangi bir hata görürseniz bana bu sizin için nasıl çalıştığını biliyorum ve yorum lütfen.

Bunu Paylaş:
  • Google+
  • E-Posta
Etiketler:

YORUMLAR

SPONSOR VİDEO

Rastgele Yazarlar

  • ChrisCrossMedia

    ChrisCrossMe

    17 EYLÜL 2009
  • Ryan Billy

    Ryan Billy

    30 EKİM 2006
  • Shantanu Sood

    Shantanu Soo

    3 Kasım 2008