0

jquery を使用して、要素の高さをユーザーのブラウザーと等しくなるように設定しようとしています。これは私がこれまでに得たコードで、動作していません。CSSで最小の高さを設定しているためですか？ユーザーの解像度と同じにするために、そのクラスが本当に必要です。

<script type="text/javascript">
jQuery(function() { 
    jQuery(".bg").css("height", jQuery(window).css("height"));
}
</script>
4

5 に答える 5

2

変数をwindow.innerHeight

$(document).ready(function() {
    var height = window.innerHeight;
    $(".bg").css("height", height);
});

の詳細については、 https : //developer.mozilla.org/en-US/docs/DOM/window.innerHeightを参照してくださいwindow.innerHeight。

window.innerHeightあなたが求めていたように、実際には画面解像度ではなく、ユーザーのビューポートの高さを返しますが、機能します。window.innerWidthユーザーの画面統計を取得する方法は他にもあります。

self.innerHeight、parent.innerHeight、およびも使用できますtop.innerHeightが、これらは目的が異なります。（リンクを参照）。

また、使用して$(window).css("height");いるjQuerycss()関数はcss値を割り当てますが、文字列は返しません。文字列を返す$(window).height()ためです。height()

var height = function() { return this.length; }
// height() returns "this.length"
于 2013-01-23T18:11:00.207 に答える
1

これを試してみてください。画像の縦横比を維持します

$(function(){
var ratio = $("img").width() / $("img").height();
var newWidth = ($(window).height()-10) * ratio;
if(newWidth > $(window).width())
        $("img").css("width","100%");
    else
        $("img").css("width",newWidth+"px");
$(window).resize(function(){
    var ratio = $("img").width() / $("img").height();
    var newWidth = $(window).height() * ratio;
    if(newWidth > $(window).width()){
        $("img").css("width","100%");

        }
    else{
        $("img").css("width",newWidth+"px");

        }
});
});
于 2013-01-23T18:12:10.470 に答える
0

を使用する必要がありますjQuery(window).height()。Windows には、解像度によって変化する動的な高さの CSS プロパティが実際にはありません。

于 2013-01-23T18:09:51.330 に答える
0

「要素」の高さをウィンドウの高さに設定するには、必要があります。

$('element').height($(window).height());
于 2013-01-23T18:09:55.963 に答える
0

この JavaScript スクリプトを使用して、ブラウザーの高さと幅を取得できます。複数のブラウザーもサポートしています。

var viewportwidth;
var viewportheight;
// the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight

if (typeof window.innerWidth != 'undefined') {
    viewportwidth = window.innerWidth,
    viewportheight = window.innerHeight
}

// IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)

else if (typeof document.documentElement != 'undefined' && typeof document.documentElement.clientWidth != 'undefined' && document.documentElement.clientWidth != 0) {
    viewportwidth = document.documentElement.clientWidth,
    viewportheight = document.documentElement.clientHeight
}

// older versions of IE

else {
    viewportwidth = document.getElementsByTagName('body')[0].clientWidth,
    viewportheight = document.getElementsByTagName('body')[0].clientHeight
}

ブラウザーの幅と高さは、viewportwidth変数viewportheightと にそれぞれ格納されます。その後、次のようなものを使用できます

var bg = document.getElementById("bg");
bg.style.height = viewportheight;

これにより、 idbgの高さを持つ要素がビュー ポートの高さに設定されます。

于 2013-01-23T18:11:26.490 に答える