使用Javascript向HTML元素添加寬度

Question

我正在嘗試使用JavaScript函數來更改div標簽的位置和大小，並對如何引用div的當前寬度感到困惑。

這是我的職責

function socialExt()
{
    document.getElementById("Left").style.width = ("Left").width+240px;
}

我希望它每次單擊按鈕時增加240像素 。

• 我應該用什么替換("Left").width以便訪問其寬度，以便可以向其添加240px
• 我目前也沒有使用JQuery，應該使用它嗎？

Answer 1

假設您的字符串末尾始終有一個維， parseInt（）將為您完成這項工作。

function socialExt()
{
    var el = document.getElementById("Left");
    el.style.width = (parseInt(el.style.width, 10) + 240) + 'px';
}

在上方，我們將帶有尾隨px的值解析為整數（您也可以使用浮點數），將其添加240，然后在將'px'附加到字符串后將其強制轉換為字符串。

Answer 2

借助JQuery，您可以使用：

var $element = $('#Left');
$element.width($element.width() + 240);

jsfiddle上的演示

JQuery .width()函數返回一個整數，該整數表示元素的寬度（以像素為單位）。 不管是否在元素上明確設置寬度，它都似乎可以工作。 是否以像素以外的單位指定原始寬度也無關緊要（例如，“ 20em”）。

這是使用諸如JQuery之類的庫的一件好事，但在這種情況下使用它可能還不夠。 但是，如果要在頁面上添加更多JavaScript，則應考慮使用它。

Answer 3

快速又臟的jQuery版本：

$('#Left').width("+=240");

編輯注釋中的用例

if ($('#Left').width() < 640) {
    $('#Left').width("+=240");
}

請查看文檔以獲取更多信息和示例。

請注意，在上面的示例中，如果將$('#Left')提取到變量中，性能會更高。 這是更有效的賬單，您只需要查詢一次DOM。 這可能不是您需要擔心的事情，但是很高興知道。 修改后的示例如下：

var el = $('#Left');
if (el.width() < 640) {
    el.width("+=240");
}

Answer 4

不需要jQuery。 稍加修改，它應該可以工作：

function socialExt() {
    var el = document.getElementById("Left");
    var width = parseInt(el.style.width);
    el.style.width = (width + 240) + "px"
}

Answer 5

對於這個問題可以有這些答案。

第一種方法是使用JS。 您做錯了一點。 因為首先使用的是document.get...方法來獲取元素，所以您將不得不使用相同的東西來再次獲取元素。

document.getElementById("Left").style.width = 
                  (parseInt(document.getElementById("Left").width) + 240) + "px";

您可以嘗試jQuery：

http://jsfiddle.net/afzaal_ahmad_zeeshan/Tr223/1/

$('#div').width($('#div').width() + 240 + 'px'); // add 240 to the width

Answer 6

由於尚未說明元素的初始狀態，因此它可以是以下任意一種：

• 未指定寬度
• 以像素為單位指定的寬度（您要使用其修改的單位）
• 以其他單位指定的寬度

因此，您必須做的第一件事就是對此進行標准化。 您可以使用getComputedStyle進行此操作，但是由於您使用的是jQuery（或者至少已在問題上標記了它），因此也可以讓它為您處理它。

var element = jQuery('#Left');
var initial_width = element.width();

這將為您提供以數字表示的像素寬度。

然后，您可以添加到此並將寬度設置為新值。

var desired_width = initial_width + 240;
element.width(desired_width);

或一行：

jQuery('#Left').width( jQuery('#Left').width() + 240 );

觀看現場演示

還是沒有jQuery：

var element = document.getElementById('Left');
var style = getComputedStyle(element, null);
var initial_width = style.width;
var initial_pixels = parseFloat(initial_width);
element.style.width = initial_pixels + 240 + "px";

觀看現場演示 。

Answer 7

element.style.width返回字符串（元素的寬度，以px為單位）。 因此，解決您的問題的好方法是，您需要解析整數的寬度，然后添加240，最后將'px'添加到您的寬度中，如下所示

function socialExt()
{
    var elem =document.getElementById("Left");
    elem.style.width= parseInt(elem.style.width||0,10) + 240+'px' 
}

你可以在這里檢查小提琴