JavaScript-取得要素の幅

2231 ワード

要素の幅の高さを取得


getComputedStyle


注意:
  • が読み取る範囲はcontentの値
    • である.
  • 行内を読み取ることもできるし、css設定のスタイル
    • を読み取ることもできる.
  • は読み取りのみ可能であり、
    • は設定できない.
  • はIE 9以上のプレミアムブラウザ
    geyComputedStyle(oDiv).width
getComputedStyle(oDiv).height
    • のみをサポートする.

    currentStyle

  • が読み取る範囲はcontentの値
    • である.
  • 行内を読み取ることもできるし、css設定のスタイル
    • を読み取ることもできる.
  • は読み取りのみ可能であり、
    • は設定できない.
  • は、IE 9以下のローレベルブラウザ
    oDiv.currentStyle.width
oDiv.currentStyle.height
    • のみをサポートする.

    style

  • が読み取る範囲はcontentの値
    • である.
  • は行内のみを読み取る、css設定のスタイル
    • を読み取ることができない.
  • は読み取り可能である、
    • を設定してもよい.
  • 高度な低レベルブラウザは、
    oDiv.style.width
oDiv.style.height
    • をサポートしています.

    offsetWidth / offsetHeight

  • 読み出しの範囲はcontent+padding+borderの値
    • である.
  • 行内を読み取るもよいし、css設定のスタイル
    • を読み取るもよい.
  • は読み取りのみ可能であり、
    • は設定できない.
  • 高度な低レベルブラウザは、
    oDiv.offsetWidth
oDiv.offsetHeight
    • をサポートしています.

    client

  • clientWidth/clientHeightが取得した幅はcontent+padding
    • です.
  • clientTop/clientLeftが取得した幅は、上枠および左枠
    oDiv.clientWidth / oDiv.clientHeight
oDiv.clientTop / oDiv.clientLeft
    • である.

    Webページの表示範囲の幅を取得

  • プレミアムブラウザ
    window.innerWidth
window.innerHeight
  • ローレベルブラウザ
    //     
documnet.documentElement.clientWidth
document.documentElement.clientHeight

//      /     
document.body.clientWidth
document.body.clientHeight
  • 互換表記
    function getScreen() {
    if (window.innerWidth){
        return {
            screenWidth: window.innerWidth,
            screenHeight: window.innerHeight
        }
    }else if (document.compatMode === "CSS1Compat"){ //            
        return {
            screenWidth: document.body.clientWidth,
            screenHeight: document.body.clientHeight
        }
    }else {
        return {
            screenWidth: document.documentElement.clientWidth,
            screenHeight: document.documentElement.clientHeight
        }
    }
}
    • IE hack
    cssクラスセレクタ