Javascript不能通过element.style.maxHeight获取元素的最大高度 [英] Javascript incapable of getting element's max-height via element.style.maxHeight

问题描述

我在javascript中制作简单的手风琴菜单。我想要通过css max-height和min-height值为元素设置紧凑和扩展的高度。由于某些原因，当我尝试检索javascript中的元素的最小高度和最大高度用于动画时，我得到一个空字符串，而不是像500像素一样。最大高度值在css中设置，例如
#id {
min-height：40px;
max-height：500px;
}
全部设置，但是当我在javascript中添加调试机制，如
alert（item.style.minHeight ）;
它弹出一个空警告框。这是在Firefox 3.6.2和IE 8中发生的。有人知道为什么javascript拒绝能够获取元素的minHeight和maxHeight？

解决方案

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

然而，IE方式和标准方式之间存在差异，例如，IE element.currentStyle 属性希望您访问由两个或多个单词组成的CCS属性名称， em> camelCase （例如 maxHeight ， fontSize ， backgroundColor 等），标准方式期望具有用破折号分隔的单词的属性（例如 max-height ， font-size ， background-color 等）。

另外，IE element.currentStyle 将返回指定单位的所有尺寸（例如12pt，50％，5em），标准方式将以像素为单位计算实际尺寸。

之前我做了一个跨浏览器功能，可以让您以跨浏览器的方式获取计算的样式：

 函数getStyle（el，styleProp）{
 var value，defaultView =（el.ownerDocument || document）.defaultView; 
 // W3C标准方式：
 if（defaultView&&& defaultView.getComputedStyle）{
 //将资源名称设置为css符号
 //（连字分隔的字例如font-size）
 styleProp = styleProp.replace（/（[AZ]）/ g， -  $ 1）。toLowerCase（）; 
返回defaultView.getComputedStyle（el，null）.getPropertyValue（styleProp）; 
} else if（el.currentStyle）{// IE 
 //将资源名称设置为camelCase 
 styleProp = styleProp.replace（/ \-（\w）/ g，函数（str，letter）{
 return letter.toUpperCase（）; 
}）; 
 value = el.currentStyle [styleProp]; 
 //将其他单位转换为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; 
返回值; 
}）（value）; 
} 
返回值; 
} 
} 
  

上述功能在某些情况下不完美，例如，对于颜色，标准方法将在 rgb（...）符号中返回颜色，在IE上，它们将按照它们的定义返回它们。

查看此示例。

I am making a simple accordion menu in javascript. I'd like to be able to set the compact and expanded heights for the elements via the css max-height and min-height values. For some reason, when I try to retrieve the min-height and max-height of the elements in javascript for animation purposes, I get an empty string rather than, for instance, "500px" like it should. The max-height value is set in css, e.g. #id { min-height: 40px; max-height: 500px; } is all set up, but when I put a debugging mechanism in my javascript such as alert( item.style.minHeight ); it pops up an empty alert box. This happens in Firefox 3.6.2 and IE 8. Does anybody know why javascript refuses to be able to get an element's minHeight and maxHeight?

解决方案

The element.style property lets you know only the CSS properties that were defined as inline in that element, you should get the computed style, is not so easy to do it in a cross-browser way, as others said, IE has its own way, through the element.currentStyle property, the DOM Level 2 standard way, implemented by other browsers is the document.defaultView.getComputedStyle method.

However there are differences between the IE way and the standard way, for example, the IE element.currentStyle property expect that you access the CCS property names composed of two or more words in camelCase (e.g. maxHeight, fontSize, backgroundColor, etc), the standard way expects the properties with the words separated with dashes (e.g. max-height, font-size, background-color, etc).

Also, the IE element.currentStyle will return all the sizes in the unit that they were specified, (e.g. 12pt, 50%, 5em), the standard way will compute the actual size in pixels.

I made some time ago a cross-browser function that allows you to get the computed styles in a cross-browser way:

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

The above function is not perfect for some cases, for example for colors, the standard method will return colors in the rgb(...) notation, on IE they will return them as they were defined.

Check this example.

这篇关于Javascript不能通过element.style.maxHeight获取元素的最大高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！