javascript - trick to get and set height and width -

joe.bq.wang

浏览: 399701 次
性别:
来自: 上海

最近访客更多访客>>

musicull

hillsoul

virtual_garden

mengke111

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

javascript - trick to get and set height and width

博客分类：

javascript

javascript

when looking at properties that could have an auto value, it was mentioned that height and width are two properties that frequently have these values.

the offsetHeight and offsetWidth properties provide just that: A fairly reliable place to access the correct height and width of an element. The numbers returned by the two properties include the padding of the element as well.

this is all well, but there is one gotcha, though that if hte element is hidden, the offsetWidth an offsetHeight will be 0; so we hae to take a woraround to temporarily make the element visible, but in a hidden state.

achieve this by setting the display property to block (making it visible and able to be measured) and immediately set its visibility to hidden (making it invisible to the user) and finally set its position to absolute (taking it out of the flow of the document, stopping it from pushing any other elements out of the way)

below shows the code sample how to do that.

<html>
<head>
<title>Height/Width Test</title>
<script type="text/javascript">
  (function () {
    this.height = function (elem) {
      return this.offsetHeight ||
      swap(elem, props, function () {
        return elem.offsetHeight;
      });
    };
    this.width = function (elem) {
      return this.offsetWidth ||
        swap(elem, props, function () {
          return elem.offsetWidth;
      });
    };
    var props = {
      position: "absolute",
      visibility: "hidden",
      display: "block"
    };
    // the wap function will temporary set the 
    // e.g. positoin to be "absolute"
    //      visiblity to be "hidden"
    // after retrieve the value, store the old value back 
    function swap(elem, options, callback) {
      var old = {}, ret;
      // Remember the old values, and insert the new ones
      for (var name in options) {
        old[name] = elem.style[name];
        elem.style[name] = options[name];
      }
      ret = callback();
      // Revert the old values
      for (var name in options) {
        elem.style[name] = old[name];
      }
      return ret;
    }
  })();
  window.onload = function () {
    var block = document.getElementById("block");
    var none = document.getElementById("none");
    // Both will alert out the same values
    alert(width(block) + " " + height(block));
    alert(width(none) + " " + height(none));
  };
</script>
</head>
<body>
<div id="block">Test</div>
<div id="none" style="display:none;">Test</div>
</body>
</html>

分享到：

javascript - trick to test visibility of ... | wpf - use of DependencyObject to impleme ...

2012-08-15 08:05
浏览 548
评论(0)
分类:编程语言
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

javascript - trick to get and set height and width

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

javascript - trick to get and set height and width

评论

发表评论

相关推荐

javascript - trick to cross browser DOM ready event

javascript - trick to simulate mouseenter and mouseleave

javascript - trick to simulate the change event

javascript - trick to simulate bubbling submit event

javascript - trick to implement bubbling submit event

javascript - trick to detect bubbling supportability

javascript - trigger event and custom events

javascript - trick to handlers management

javascript - trick to centralized store

javascript - trick to fix the event object

javascript - tricks to deal with colors

javascript - trick to manipulate the opacity

javascript - trick to test visibility of an element

javascript - trick to set/get attributes that expects px values

javascript - trick to get and set CSS style

javascript - trick to normalize href for IE

javascript - trick IE form and its expando attribute

javascript expando and attributes

javascript - trick to getText and setText

javascript - trick/guideline to remove DOM element

最近访客更多访客>>