Giá trị CSS kế thừa qua Javascript

Question

Trên trang của tôi, tôi đang thay đổi một số kiểu CSS thông qua javascript. Khi tôi thử và kéo một giá trị đã được thừa hưởng - nó sẽ trống. Hãy xem xét những điều sau đây:

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

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

Và html:

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

Nếu tôi nhìn vào các yếu tố 'document.getElementById (objname) .style.display' trống của nó? Làm thế nào tôi có thể đọc giá trị hiển thị thông qua javascript?

Answer 1

Bạn sẽ muốn sử dụng getComputedStyle.

Thuộc tính .style là một phương tiện để tiếp cận và thiết lập phong cách nội tuyến (ví dụ như các thuộc tính style).

Lưu ý, tuy nhiên, ví dụ của bạn không liên quan gì đến việc thừa kế. Chỉ các bộ quy tắc áp dụng trực tiếp cho các yếu tố bạn quan tâm. Thừa kế là khi một phần tử có cùng kiểu với cha mẹ thông qua từ khóa inherit.

span { 
    color: inherit; 
} 

getComputedStyle sẽ cung cấp giá trị tính toán cuối cùng, vì vậy nó cũng sẽ nhận giá trị kế thừa.

Answer 2

Bạn cần phải nhìn vào phong cách tính toán, see here

Answer 3

quy tắc CSS thứ hai của bạn:

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

sẽ phù hợp với bất cứ điều gì với id "FilterBox" đó là một hậu duệ của bất cứ điều gì với một lớp "trượt", vì vậy quy định này không áp dụng cho div của bạn.

Và để có được những kiểu tính toán, bạn có thể tham khảo câu trả lời Fabien, hoặc xem xét sử dụng jQuery, mà làm cho công cụ này dễ dàng hơn nhiều. Css

sử dụng jQuery, $ ("# FilterBox") (" hiển thị ") sẽ trả lại giá trị hiện tại cho" hiển thị ".

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")); 
}