Javascriptの常用サイズは取得します.

1633 ワード

タグ:js
縁起がよい.
普段は開発中に、多かれ少なかれ元素サイズを取得する必要があります.
関連サイズを常用する

ウィンドウ可視サイズ試験アドレス

/**
 *         
 */
function getWindowClientSize(){
    var docElem = document.documentElement;
    var docBd = document.body;
    return {
      w: docElem.clientWidth || docBd.clientWidth,
      h: docElem.clientHeight || docBd.clientHeight
    }
}

ウィンドウの実サイズ試験アドレス

/**
 *         ，          
 */
function getWindowSize() {
  var docElem = document.documentElement;
  var docBd = document.body;
  return {
    w: docElem.scrollWidth || docBd.scrollWidth,
    h: docElem.scrollHeight || docBd.scrollHeight
  }
}

要素の可視サイズ試験アドレス

/**
 *          
 * @param {Dom} elem        
 *  ：      0，      0
 */
function getElementClientSize(elem) {
    return {
        pw: elem.clientWidth,    // width + padding(  )
        ph: elem.clientHeight,   // height + padding(  )
        pdw: elem.offsetWidth,   // width + padding(  ) + border(  )
        pdh: elem.offsetHeight   // height + padding(  ) + border(  )
    }
}

要素の実サイズ試験アドレス

/**
 *          
 * @param {Dom} elem        
 *  ：           ，    ，   ,           
 */
function getElementSize(elem) {
    return {
        w: elem.scrollWidth,
        h: elem.scrollHeight
    }
}

スクロールされたサイズテストアドレス

/**
 *            
 */
function getScrollSize() {
    var docElem = document.documentElement;
    var docBd = document.body;
    return {
        t: docElem.scrollTop || docBd.scrollTop,
        l: docElem.scrollLeft || docBd.scrollLeft
    }
}

select、option要素のDOM操作: