web-dev-qa-db-ja.com

（マイナス）スクロールバーなしで画面幅を取得する方法は？

要素があり、垂直スクロールバーなしの幅が必要です！.

Firebugは、体の幅が1280pxだと言っています。

これらのいずれかがFirefoxで正常に機能します。

console.log($('.element').outerWidth() );
console.log($('.element').outerWidth(true) );

$detour = $('.child-of-element').offsetParent();
console.log( $detour.innerWidth() );

これらはすべて1263pxを返します。これは、探している値です。

ただし、他のすべてのブラウザでは1280pxと表示されます。

垂直スクロールバーなしでフルスクリーン幅を取得するクロスブラウザの方法はありますか？

jquerycross-browserwidth
92
frequent

.prop("clientWidth")および.prop("scrollWidth")

var actualInnerWidth = $("body").prop("clientWidth"); // El. width minus scrollbar width
var actualInnerWidth = $("body").prop("scrollWidth"); // El. width minus scrollbar width

inJavaScript：

var actualInnerWidth = document.body.clientWidth;     // El. width minus scrollbar width
var actualInnerWidth = document.body.scrollWidth;     // El. width minus scrollbar width

PS：scrollWidthを確実に使用するには、要素が水平方向にオーバーフローしないように注意してください

jsBinデモ

.innerWidth()も使用できますが、これはbody要素でのみ機能します

var innerWidth = $('body').innerWidth(); // Width PX minus scrollbar
151
Roko C. Buljan

次のように記述するだけでVanilla javascriptを使用できます。

var width = el.clientWidth;

これを使用して、次のようにドキュメントの幅を取得することもできます。

var docWidth = document.documentElement.clientWidth || document.body.clientWidth;

ソース： MDN

次のように、スクロールバーを含むウィンドウ全体の幅を取得することもできます。

var fullWidth = window.innerWidth;

ただし、これはすべてのブラウザーでサポートされているわけではないため、フォールバックとして、上記のdocWidthを使用し、 scrollbar width を追加することができます。

ソース： MDN

32
Joshua Bambrick

$elementがjQuery要素であることを前提とするいくつかの例を次に示します。

// Element width including overflow (scrollbar)
$element[0].offsetWidth; // 1280 in your case

// Element width excluding overflow (scrollbar)
$element[0].clientWidth; // 1280 - scrollbarWidth

// Scrollbar width
$element[0].offsetWidth - $element[0].clientWidth; // 0 if no scrollbar
13
Konstantin Dinev

これを試して ：

$('body, html').css('overflow', 'hidden');
var screenWidth1 = $(window).width();
$('body, html').css('overflow', 'visible');
var screenWidth2 = $(window).width();
alert(screenWidth1); // Gives the screenwith without scrollbar
alert(screenWidth2); // Gives the screenwith including scrollbar

このコードを使用すると、スクロールバーの有無にかかわらず画面の幅を取得できます。ここでは、bodyのオーバーフロー値を変更し、スクロールバーのある場合とない場合の幅を取得しています。

8
HQtunes.epizy

スクロールバーなしで正しい幅と高さを取得する最も安全な場所は、HTML要素からです。これを試して：

var width = document.documentElement.clientWidth
var height = document.documentElement.clientHeight

ブラウザのサポートはかなりまともで、IE 9以上がこれをサポートしています。 OLD IEの場合、ここで説明した多くのフォールバックのいずれかを使用します。

6
Naman Goel

同様の問題が発生し、width:100%;を実行すると解決しました。この質問に答えてみて、<iframe>の性質が複雑な関数を使用しないとこれらのjavascript測定ツールを不正確にすることに気付いた後、この解決策に至りました。 100％にすることは、iframeでそれを処理する簡単な方法です。あなたがどのHTML要素を操作しているかわからないので、私はあなたの問題について知りません。

0
www139

これらの解決策はどれもうまくいきませんでしたが、幅を取り、 スクロールバーの幅 を引くことで修正できました。これがどのようにブラウザ間で互換性があるのか​​わかりません。

0
homebrand

ここに私が使用するものがあります

function windowSizes(){
    var e = window,
        a = 'inner';
    if (!('innerWidth' in window)) {
        a = 'client';
        e = document.documentElement || document.body;
    }
    return {
        width: e[a + 'Width'],
        height: e[a + 'Height']
    };  
}

$(window).on('resize', function () {
    console.log( windowSizes().width,windowSizes().height );
});
0
Benn