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获取元素的最大高度

回答

相关问题