三里屯摇滚 发表于 2011-12-13 21:23

javascript学习笔记(2)

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













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 标准的样式:







Java代码1./*Get css property value from extenal style sheet for IE browser */
2.if(hid.currentStyle) {
3.      display = hid.currentStyle['display'];
4.}
5./*Get css property value from extenal style sheet for FireFox, Chrome browser */
6.else if(window.getComputedStyle) {   
7.      display = window.getComputedStyle(hid, null)['display'];
8.}参考链接: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。

如果有一天21 发表于 2011-12-24 19:59

谢谢分享希望于楼主多多交流
页: [1]
查看完整版本: javascript学习笔记(2)