jquery css選擇器不工作

-1

我想獲得窗口的寬度&高度+ div的寬度&高度來找到調整的寬度。我也試圖絕對定位div與jquery，但我的代碼不起作用。我將提供下面的代碼。jquery css選擇器不工作

CSS：

#inner { 
    width: 500px; height: 300px; 
    background: #ff0000; 
}

的jQuery：

$(document).ready(function() { 

    var screenWidth = $(window).width(); 
    var screenHeight = $(window).height(); 

    var boxWidth = $("#inner").width(); 
    var boxHeight = $("#inner").height(); 

    var adjustedWidth = screenWidth - boxWidth; 
    var adjustedHeight = screenHeight - boxHeight; 

    $("#inner").css('position', 'absolute'); 
    $("#inner").css('top', adjustedWidth + 'px'); 
    $("#inner").css('left', adjustedHeight + 'px'); 

});

我在做什麼錯在我的jQuery？希望我的解釋清楚。

來源

2013-02-03 12japerk

「我的代碼不工作」是什麼意思？你有錯誤嗎？你沒有得到你期望的結果嗎？你得到了什麼，你期望什麼？請創建一個http://jsfiddle.net/演示。 –

您是否可以發佈關聯的HTML以防它在問題中起作用？ –

試過一個jsfiddle：http://jsfiddle.net/gnvaG/它似乎工作正常（檢查結果的來源）。你可能沒有正確包含jQuery，或者你的HTML不正確。 – jgthms

如果你想在最底層右對齊的DIV，那麼你已經混了頂 - > adjustedWidth和左 - > adjustedHeight：

$("#inner").css('top', adjustedWidth + 'px'); 
$("#inner").css('left', adjustedHeight + 'px');

當它應該是其他方式周圍：

$("#inner").css('top', adjustedHeight + 'px'); 
$("#inner").css('left', adjustedWidth + 'px');

除此之外，您的代碼looks like it works。

此外，您在嘗試更改CSS寬度或高度時不需要添加「px」。

來源

2013-02-03 01:01:19 Lrdwhyt

沒有必要爲此使用JavaScript。當絕對定位的東西，left和top不是唯一的東西，你可以使用;相反，您可以在適當的地方使用right和bottom。例如，你似乎是在做定位的東西在右下角，你可以這樣做：

#something { 
    position: absolute; 
    right: 0; 
    bottom: 0; 
    width: 300px; 
    height: 150px; 
    background: red; 
}

Try it.

來源

2013-02-04 02:26:41 icktoofay

如果代碼包括得到一個組件的尺寸（尤其是有圖像在頁面上），您希望將代碼放在load處理程序中，而不是ready處理程序，因爲ready在下載所有圖像之前執行，並且在此之後頁面的大小可能會有所不同。

另外你的top和left應該交換。

$(document).on('load', function() { 

    var screenWidth = $(window).width(); 
    var screenHeight = $(window).height(); 

    var boxWidth = $("#inner").width(); 
    var boxHeight = $("#inner").height(); 

    var adjustedWidth = screenWidth - boxWidth; 
    var adjustedHeight = screenHeight - boxHeight; 

    $("#inner").css('position', 'absolute'); 
    $("#inner").css('top', adjustedHeight + 'px'); 
    $("#inner").css('left', adjustedWidth + 'px'); 

});

來源

2013-02-04 02:34:08 texasbruce

jquery css選擇器不工作

回答

相關問題