javascript学习札记（2） js调用外部css样式表的style值， 获得一个不能预知高度的DIV的高度

javascript学习笔记（2） js调用外部css样式表的style值， 获得一个不能预知高度的DIV的高度

完善上一篇日志中demo的两个不足。?

?

1. js只能修改html内部的css样式代码；
2. 隐藏div的高度固定，如果隐藏区域文字变动时，布局变差。

?

1. js调用外部css样式表的style值

css样式表有三种写法：

?

1. 内嵌样式（inline Style） ：是写在Tag里面的，内嵌样式只对所有的Tag有效。
2. 内部样式（internal Style Sheet）：是写在HTML的 里面的，内部样式只对所在的网页有效。?
3. 外部样式表（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的高度

?

1. 通过元素的clientHeight属性能够得到元素的高度,如：??
2. var?height?=?element.clientHeight;??
3. ??
4. 这种做法的局限：??
5. 1.?如果元素的display属性设置为none,?那么得到的结果为0??
6. 2.?在safari浏览器中，需要使用：element.offsetHeight得到实际高度，这是safari浏览器的bug??
7. ??
8. 下面是Prototype提供的方法，能够兼容各种浏览器，同时在元素隐藏的情况下也能正确得到元素尺寸，供参考：??
9. getDimensions:?function(element)?{??
10. ????element?=?$(element);??
11. ????var?display?=?$(element).getStyle('display');??
12. ????if?(display?!=?'none'?&&?display?!=?null)?//?Safari?bug??
13. ??????return?{width:?element.offsetWidth,?height:?element.offsetHeight};??
14. ??
15. ????//?All?*Width?and?*Height?properties?give?0?on?elements?with?display?none,??
16. ????//?so?enable?the?element?temporarily??
17. ????var?els?=?element.style;??
18. ????var?originalVisibility?=?els.visibility;??
19. ????var?originalPosition?=?els.position;??
20. ????var?originalDisplay?=?els.display;??
21. ????els.visibility?=?'hidden';??
22. ????els.position?=?'absolute';??
23. ????els.display?=?'block';??
24. ????var?originalWidth?=?element.clientWidth;??
25. ????var?originalHeight?=?element.clientHeight;??
26. ????els.display?=?originalDisplay;??
27. ????els.position?=?originalPosition;??
28. ????els.visibility?=?originalVisibility;??
29. ????return?{width:?originalWidth,?height:?originalHeight};??
30. ??} ?

?

?

Prototype提供的方法很聪明，通过

1. ?els.visibility?=?'hidden';??
2. ?els.position?=?'absolute';??
3. ?els.display?=?'block'; ?

得到了

1. ?display:none

的 width，height。

自己裸奔写js代码很傻だけど...

?