Javascript yoluyla CSS Değerleri Initialited

Question

Sayfamda javascript ile bazı css stillerini değiştiriyorum. Kalıtılan bir değeri almaya çalıştığımda - boş çıkıyor. Aşağıdaki ele alalım:

.Sliding 
    { 
     display: none; 
     overflow: hidden; 
    } 

    .Sliding #FilterBox 
    { 
     height: 185px; 
     background-color: Fuchsia; 
    } 

Ve html:

<div class="Sliding" id="FilterBox"> 
     <h3>Test Form</h3> 
     This is a test/<br /> 
     12345 
</div> 

Ben elemanı bakarsak onun boş 'document.getElementById (objname) .style.display'? Ekran değerini javascript ile nasıl okuyabilirim? Sen bilgisayarlı tarzı bakmak gerekir

Answer 1

Sen getComputedStyle kullanmak isteyeceksiniz.özelliği, .style özelliği, satır içi stiline (yani, stil niteliği gibi) erişmek ve ayarlamak için bir araçtır.

Ancak, örneğinizin mirasla ilgisi olmadığını unutmayın. Yalnızca ilgilendiğiniz öğelere doğrudan uygulanan kurallar. Bir öğenin, inherit anahtar sözcüğü aracılığıyla üst öğesiyle aynı stilde aldığı kalıtımıdır.

span { 
    color: inherit; 
} 

getComputedStyle olsa nihai bilgisayarlı değeri verecektir, bu yüzden de kalıtsal değerleri toplayacak.

Answer 2

, see here

Answer 3

Kişisel ikinci CSS kuralı:

.Sliding #FilterBox 
{ 
    height: 185px; 
    background-color: Fuchsia; 
} 

id bir sınıf "Sürme" ile bir şey soyundan olan "FilterBox" olan herhangi bir maç olacak, bu nedenle bu kural div için geçerli değildir.

Ve bilgisayarlı tarzı elde etmek için, Fabien cevabı bakın veya bu şeyler çok daha kolay hale getirir jQuery kullanarak düşünebiliriz: "jQuery, $ ("# FilterBox") kullanılarak

css (. Ekran ")" display "için geçerli değeri döndürür.

Answer 4

if (!window.getComputedStyle) 
{ 
    window.getComputedStyle = function(el, pseudo) 
    { 
     this.el = el; 
     this.getPropertyValue = function(prop) { 

     var re = /(\-([a-z]){1})/g; 
     if (prop == 'float') 
      prop = 'styleFloat'; 
     if (re.test(prop)) 
     { 
      prop = prop.replace(re, function() { 

      return arguments[2].toUpperCase(); 
      }); 
     } 

     return el.currentStyle[prop] ? el.currentStyle[prop] : null; 
     } 

     return this; 
    } 
} 

function GetCompStyle() 
{ 
    var compStyle = window.getComputedStyle(document.getElementById('FilterBox'), ""); 
    alert(compStyle.getPropertyValue("display")); 
}