通过 JavaScript 更改 CSS 属性。（使用 ID 和类）答案

【问题标题】：Change CSS Property through JavaScript. (Uses ID's and Classes)通过 JavaScript 更改 CSS 属性。（使用 ID 和类）
【发布时间】：2014-07-04 09:47:15
【问题描述】：

我正在尝试使用 JavaScript 调整面板的大小以将小图像放入面板中，但效果不佳。

粗体字：

<body id="visCinemaTransRefund"><br>
<div id="content"><br>
<ul class="PayPanel" id="paymentDetails"><br>

这是需要修改的 CSS：

visCinemaTransRefund .PayPanel { width: 435px; }

如何修改此面板的宽度？

我也有一个我想在 CSS 中调整大小的表单：

visCinemaTransRefund FORM (width: 1005px;)

【问题讨论】：

可以修改元素的样式。看看这个stackoverflow.com/a/10118190/2165528

标签： javascript jquery html css class

【解决方案1】：

document.getElementById('paymentDetails').style.width = '1000px';

【讨论】：

这很好用，非常感谢。对于我使用的表格：document.getElementById('form').style.width = '1005px';
@MichaelMorgan 是表单 ID 还是 HTML 标记？

【解决方案2】：

您是否尝试过使用：

document.getElementById("paymentDetails").getElementsByClassName("PayPanel")[0].style.width="1000px"

请记住：getElementsByClassName 返回一个元素数组，因此使用[0] 您将索引第一个元素（当然，也是唯一一个）。

由于getElementsById 返回单个元素，getElementsByClassName 可能没用。

【讨论】：

【解决方案3】：

如果你想使用 CSS 类来做到这一点：

HTML：

<div id="myDiv" class="medium"></div>
<button id="btn">Click me</button>

CSS：

#myDiv {
    background-color: gray;
}

.medium {
       height: 50px;
       width: 50px;
}

.big {
       height: 100px;
       width: 100px;
}

JS：

document.getElementById("btn").onclick = function() {
    var element = document.getElementById("myDiv"); // or document.getElementsByClassName("className")

    if (element.className == "medium") {
        document.getElementById("myDiv").className = "big";
    } else {
        document.getElementById("myDiv").className = "medium";
    }
};

JSFIDDLE

【讨论】：

【解决方案4】：

使用以下代码通过使用getElement functions 从DOM 访问HTML 元素并使用setAttribute javaScript 函数为其设置宽度来更改标签的宽度。

document.getElementById("paymentDetails").setAttribute("style","width:500px;");
document.getElementById("visCinemaTransRefund").getElementsByTagName("form")[0].setAttribute("style","width:1000px;");

【讨论】：

把这段代码也解释一下就更好了。
@CodingMash 说明已添加 :)

【解决方案5】：

使用 JavaScript：

document.getElementById('paymentDetails').style.width = '1000px';

使用 JQuery：

$("paymentDetails").width(1000);

$("paymentDetails").css("width","1000px");

【讨论】：