Question

我在javascript中制作一个简单的手风琴菜单。我希望能够通过css max-height和min-height值为元素设置紧凑和扩展的高度。出于某种原因，当我尝试在动画中检索javascript中元素的最小高度和最大高度时，我得到一个空字符串，而不是像它应该的那样“500px”。 max-height值在css中设置，例如 #id { min-height: 40px; max-height: 500px; } 所有设置，但当我在我的JavaScript中放置调试机制，如 alert( item.style.minHeight ); 它弹出一个空警报框。这种情况发生在Firefox 3.6.2和IE 8中。有人知道为什么javascript拒绝能够获得元素的minHeight和maxHeight吗？

Answer 1

element.style属性只让您知道在该元素中定义为 inline 的CSS属性，您应该得到计算样式，不是这样很容易以跨浏览器的方式进行，正如其他人所说，IE有自己的方式，通过element.currentStyle属性，DOM Level 2 标准方式，由其他浏览器实现的是document.defaultView.getComputedStyle方法。

然而，IE方式和标准方式之间存在差异，例如，IE element.currentStyle属性期望您访问由 camelCase 中的两个或多个单词组成的CCS属性名称（例如maxHeight，fontSize，backgroundColor等），标准方式需要将单词用短划线分隔的属性（例如max-height，font-size，{ {1}}等。）

此外，IE background-color将返回指定单位的所有大小（例如12pt，50％，5em），标准方式将计算实际大小（以像素为单位）。

我前段时间制作了一个跨浏览器的功能，允许您以跨浏览器的方式获取计算出的样式：

element.currentStyle

上述功能在某些情况下并不完美，例如对于颜色，标准方法将返回 rgb（...）表示法中的颜色，在IE上它们将返回它们原样定义

选中example。

Answer 2

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

不妨学习它，IE 9将支持getComputedStyle。

Answer 3

我强烈推荐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将立刻让您像跨浏览器专家一样滚动！

Answer 4

您需要使用currentStyle代替......

alert(item.currentStyle.minHeight);

style属性是指Javascript设置的内容，而不是继承的CSS。像jQuery这样的图书馆在内部处理这个问题（包括其他无数烦恼）。

Javascript无法通过element.style.maxHeight获取元素的最大高度

4 个答案: