javascript学习笔记（2）

三里屯摇滚

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

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



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

css样式表有三种写法：

1. 1.内嵌样式（inline Style） ：是写在Tag里面的，内嵌样式只对所有的Tag有效。
   
2. 2.内部样式（internal Style Sheet）：是写在HTML的 里面的，内部样式只对所在的网页有效。
   
3. 3.外部样式表（External Style Sheet）：如果很多网页需要用到同样的样式(Styles)，将样式(Styles)写在一个以.css为后缀的CSS文件里，然后在每个需要用到这些样式(Styles)的网页里引用这个CSS文件。

复制代码

在JavaScript中，通过document.getElementById(id).style.XXX就可以获取到XXX的值，但意外的是，这样做只能取到通过内嵌方式设置的样式值，即style属性里面设置的值。

        解决方案：引入currentStyle,runtimeStyle,getComputedStyle style 标准的样式:







Java代码

1. 1./*Get css property value from extenal style sheet for IE browser */  
   
2. 2.if(hid.currentStyle) {  
   
3. 3.      display = hid.currentStyle['display'];  
   
4. 4.}  
   
5. 5./*Get css property value from extenal style sheet for FireFox, Chrome browser */  
   
6. 6.else if(window.getComputedStyle) {   
   
7. 7.      display = window.getComputedStyle(hid, null)['display'];  
   
8. 8.}  

复制代码

参考链接：http://apps.hi.baidu.com/share/detail/22727000





获得一个不能预知高度的DIV的高度

以下完全摘自： 获得一个不能预知高度的DIV的高度

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

复制代码

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

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

复制代码

得到了

1. display:none

的 width，height。

如果有一天21

谢谢分享  希望于楼主多多交流