使用Javascript为HTML元素添加宽度

我试图用JavaScript函数更改

div

标记的位置和大小，但我不知道如何引用div的当前宽度

这是我的职责

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

我希望每次点击按钮都能增加240像素

• 我应该用什么替换

  （“Left”）.width

  ，以便访问其宽度，以便向其添加240px
• 我目前也没有使用JQuery，我应该使用它吗

---

此操作不需要jquery。修改很少，应该可以工作：

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

---

这不需要jquery。修改很少，应该可以工作：

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

---

假设在字符串的末尾始终有一个维度，将为您完成这项工作

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

---

在上面，我们将带有尾随px的值解析为一个整数（您也可以使用浮点数），向其添加240，然后在向其添加“px”时将数字强制为一个字符串。
假设您的字符串末尾始终有一个维度，则可以为您完成这项工作

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

---

在上面，我们将带有尾随px的值解析为一个整数（您也可以使用浮点数），向其添加240，然后在向其添加“px”时将数字强制为一个字符串。
这个问题可能有以下答案
第一种方法是使用JS。你做错了一点。因为您首先使用的是

document.get…

方法来获取元素，所以您必须使用相同的方法来再次获取元素

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

您可以尝试jQuery：

---

这个问题可能有以下答案
第一种方法是使用JS。你做错了一点。因为您首先使用的是

document.get…

方法来获取元素，所以您必须使用相同的方法来再次获取元素

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

您可以尝试jQuery：

---

使用JQuery，您可以使用：

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

JQuery

.width（）

函数返回一个整数，该整数表示元素的像素宽度。无论是否在元素上显式设置宽度，它似乎也可以工作。如果原始宽度是以像素以外的单位指定的（例如，“20em”），这也无关紧要

---

这是使用JQuery这样的库的一件好事，但在本例中，这可能还不足以作为使用它的理由。但是，如果你要把更多的JavaScript添加到你的页面中，你应该考虑使用它。

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

JQuery

.width（）

函数返回一个整数，该整数表示元素的像素宽度。无论是否在元素上显式设置宽度，它似乎也可以工作。如果原始宽度是以像素以外的单位指定的（例如，“20em”），这也无关紧要

---

这是使用JQuery这样的库的一件好事，但在本例中，这可能还不足以作为使用它的理由。但是，如果你要把更多的JavaScript添加到你的页面中，你应该考虑使用它。
< P>因为你还没有声明元素的初始状态，它可以是以下任何一个：
• 没有指定宽度
• 以像素为单位指定的宽度（要使用的单位）
• 以其他单位指定的宽度
所以你必须做的第一件事就是将其正常化。您可以使用jQuery来实现这一点，但是由于您使用的是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";

---

请参阅。
由于您尚未说明元素的初始状态，因此它可以是以下任一状态：
• 没有指定宽度
• 以像素为单位指定的宽度（要使用的单位）
• 以其他单位指定的宽度
所以你必须做的第一件事就是将其正常化。您可以使用jQuery来实现这一点，但是由于您使用的是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";

---

请参阅。
element.style.width返回字符串（px中元素的宽度）。因此，解决问题的好方法是，您需要在整数中解析宽度，然后添加240，最后在宽度中添加“px”，如下所示

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

---

您可以检查fiddle
element.style.width返回字符串（px中元素的宽度）。因此，解决问题的好方法是，您需要在整数中解析宽度，然后添加240，最后在宽度中添加“px”，如下所示

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

---

您可以检查fiddle的快速和肮脏jQuery版本：

$（'#左'）。宽度（“+=240”）

编辑注释中的用例

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

快速脏jQuery版本：

$（'#左'）。宽度（“+=240”）

编辑注释中的用例

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

尝试
document.getElementById（“左”）.style.width+=240。jQuery非常有用，通常使DOM操作变得非常简单。这真的取决于你的项目是否“值得”，但在大多数项目中，我将把它放在b/c中，它变得如此普遍，仅供参考，那种“大括号放置”（
{
在它自己的行上）的风格在某些边缘情况下对javaScript是有问题的。最好将它移到同一行
函数socialExt（）{
@ZachL由于值中的
px
，您的第一个建议可能会导致
NaN
@JonathanLonowski
document.getElementById（“Left”）.style.width=String（int（document.getElementById（“Left”）.style.width.replace（'px'，''）+240）+“px”；
Try
document。