javascript学习笔记（2） js调用外部css样式表的style值， 获得一个不能预知高度的DIV的高度
完善上一篇日志中demo的两个不足。[*]js只能修改html内部的css样式代码；
[*]隐藏div的高度固定，如果隐藏区域文字变动时，布局变差。
1. js调用外部css样式表的style值
css样式表有三种写法：
[*]内嵌样式（inline Style） ：是写在Tag里面的，内嵌样式只对所有的Tag有效。
[*]内部样式（internal Style Sheet）：是写在HTML的 里面的，内部样式只对所在的网页有效。
[*]外部样式表（External Style Sheet）：如果很多网页需要用到同样的样式(Styles)，将样式(Styles)写在一个以.css为后缀的CSS文件里，然后在每个需要用到这些样式(Styles)的网页里引用这个CSS文件。
在JavaScript中，通过document.getElementById(id).style.XXX就可以获取到XXX的值，但意外的是，这样做只能取到通过内嵌方式设置的样式值，即style属性里面设置的值。
解决方案：引入currentStyle,runtimeStyle,getComputedStyle style 标准的样式:
/*Get css property value from extenal style sheet for IE browser */if(hid.currentStyle) { display = hid.currentStyle['display'];}/*Get css property value from extenal style sheet for FireFox, Chrome browser */else if(window.getComputedStyle) { display = window.getComputedStyle(hid, null)['display'];}参考链接：http://apps.hi.baidu.com/share/detail/22727000
获得一个不能预知高度的DIV的高度
以下完全摘自： 获得一个不能预知高度的DIV的高度
[*]通过元素的clientHeight属性能够得到元素的高度,如：
[*]var height = element.clientHeight;
[*]
[*]这种做法的局限：
[*]1. 如果元素的display属性设置为none, 那么得到的结果为0
[*]2. 在safari浏览器中，需要使用：element.offsetHeight得到实际高度，这是safari浏览器的bug
[*]
[*]下面是Prototype提供的方法，能够兼容各种浏览器，同时在元素隐藏的情况下也能正确得到元素尺寸，供参考：
[*]getDimensions: function(element) {
[*] element = $(element);
[*] var display = $(element).getStyle('display');
[*] if (display != 'none' && display != null) // Safari bug
[*] return {width: element.offsetWidth, height: element.offsetHeight};
[*]
[*] // All *Width and *Height properties give 0 on elements with display none,
[*] // so enable the element temporarily
[*] var els = element.style;
[*] var originalVisibility = els.visibility;
[*] var originalPosition = els.position;
[*] var originalDisplay = els.display;
[*] els.visibility = 'hidden';
[*] els.position = 'absolute';
[*] els.display = 'block';
[*] var originalWidth = element.clientWidth;
[*] var originalHeight = element.clientHeight;
[*] els.display = originalDisplay;
[*] els.position = originalPosition;
[*] els.visibility = originalVisibility;
[*] return {width: originalWidth, height: originalHeight};
[*] }
Prototype提供的方法很聪明，通过
[*] els.visibility = 'hidden';
[*] els.position = 'absolute';
[*] els.display = 'block';
得到了
[*] display:none
的 width，height。
自己裸奔写js代码很傻だけど...
页:
[1]