Javascript無法通過element.style.maxHeight獲取元素的最大高度

我在javascript中製作簡單的手風琴菜單。我希望能夠通過css max-height和min-height值設置元素的緊湊和擴展高度。出於某種原因，當我嘗試在動畫中檢索javascript中元素的最小高度和最大高度時，我會得到一個空字符串，而不是像例如「500px」那樣。最大高度值在css中設置，例如， #id { min-height: 40px; max-height: 500px; } 是全部設置的，但是當我在我的javascript中加入調試機制時，例如 alert(item.style.minHeight); 它彈出一個空的警告框。這發生在Firefox 3.6.2和IE 8中。有人知道爲什麼javascript拒絕能夠獲取元素的minHeight和maxHeight嗎？Javascript無法通過element.style.maxHeight獲取元素的最大高度

來源

2010-03-28 Zane

您需要使用currentStyle，而不是...

alert(item.currentStyle.minHeight);

的style屬性指的是什麼已經被設定的Javascript，而不是繼承的CSS。像jQuery這樣的庫在內部解決這個問題（以及其他無數的煩惱）。

來源

2010-03-28 03:29:51

currentStyle for IE, getComputedStyle elsewhere. 
document.defaultView.getComputedStyle(who,'').getPropertyValue('min-height');

不妨學習它，IE 9將支持getComputedStyle。

來源

2010-03-28 03:48:18 kennebec

的element.style屬性讓你知道僅在該元素被定義爲內嵌的CSS屬性，你應該得到的計算樣式，也不是那麼容易做，在一個跨瀏覽器的方式，爲他人表示，IE有自己的方式，通過element.currentStyle屬性，DOM Level 2 標準的方式，由其他瀏覽器實現的方法是document.defaultView.getComputedStyle。

然而，有IE瀏覽器的方式和標準方法之間的差異，例如，IE element.currentStyle屬性期待您訪問的兩個或多個單詞組成的CCS屬性名稱在駝峯（如maxHeight，fontSize，backgroundColor，等等），標準方式期望的性能與用短劃線分隔的單詞（例如max-height,font-size,background-color等）。

此外，IE element.currentStyle將返回指定單位中的所有尺寸（例如12pt，50％，5em），標準方式將以像素爲單位計算實際尺寸。

我做了前一段時間一個跨瀏覽器的功能，使您得到計算的風格在跨瀏覽器的方式：

function getStyle(el, styleProp) { 
    var value, defaultView = (el.ownerDocument || document).defaultView; 
    // W3C standard way: 
    if (defaultView && defaultView.getComputedStyle) { 
    // sanitize property name to css notation 
    // (hypen separated words eg. font-Size) 
    styleProp = styleProp.replace(/([A-Z])/g, "-$1").toLowerCase(); 
    return defaultView.getComputedStyle(el, null).getPropertyValue(styleProp); 
    } else if (el.currentStyle) { // IE 
    // sanitize property name to camelCase 
    styleProp = styleProp.replace(/\-(\w)/g, function(str, letter) { 
     return letter.toUpperCase(); 
    }); 
    value = el.currentStyle[styleProp]; 
    // convert other units to pixels on IE 
    if (/^\d+(em|pt|%|ex)?$/i.test(value)) { 
     return (function(value) { 
     var oldLeft = el.style.left, oldRsLeft = el.runtimeStyle.left; 
     el.runtimeStyle.left = el.currentStyle.left; 
     el.style.left = value || 0; 
     value = el.style.pixelLeft + "px"; 
     el.style.left = oldLeft; 
     el.runtimeStyle.left = oldRsLeft; 
     return value; 
     })(value); 
    } 
    return value; 
    } 
}

以上功能不健全的某些情況下，例如用於顏色，標準方法將返回rgb（...）表示法中的顏色，在IE上它們將按照定義返回它們。

檢查此example。

來源

2010-03-28 04:51:33 CMS

我強烈推薦jQuery。

只需將jQuery添加到您的頁面，然後您就可以動態獲取和設置CSS屬性並以跨瀏覽器的方式（它消除了許多令人頭痛的問題）。下面是語法：

/* this outer '$(function() { innerContent });' 
    is jQuery's helpful function that executes when all 
    the elements in your HTML document are ready to 
    be accessed (if you executed code without this, 
    when you try to find the element you want to find, 
    it might not have been created yet, and so your code 
    will have no effect on that element) */ 
$(function() { 

    // get CSS data 
    var currentMinHeight = $('#idOfElement').css('min-height'); 
    var currentMaxHeight = $('#idOfElement').css('max-height'); 

    // set CSS data 
    $('#idOfElement').css('min-height', '999px'); 
    $('#idOfElement').css('max-height', '999px'); 

});

一定不要忘記在元素的ID前面的＃（這是jQuery的是怎麼知道你想要的是有ID的元素）

有辦法避免了重複函數調用我做了以上，並完成相同的事情。 jQuery.com會讓你立即像一個跨瀏覽器專業版一樣滾動！

來源

2010-03-28 05:36:45 user397723

Javascript無法通過element.style.maxHeight獲取元素的最大高度

回答

相關問題