如何為JavaScript元素提供CSS類？

Question

我有以下代碼

var addressPopupMenu = window.createPopup();
function showAddressPopup() {
    var popup = document.getElementById('addressFullSpan');

    popupMenuBody = popupMenu.document.body;
    popupMenuBody.style.backgroundColor = "#336699";
    popupMenuBody.style.border = "solid 2px; white";
    popupMenuBody.style.fontSize="130%";
    popupMenuBody.style.color="white";
    popupMenuBody.style.padding="10px";
    popupMenuBody.style.paddingLeft="30px";

如您所見，我正在重復popupMenuBody.style 。 我如何才能給popupMenuBody.style一個CSS類，這樣我就不必為每個彈出窗口重復此操作

編輯：這不起作用

我添加了popupMenuBody.className = "popups";

.popups
    {
        background-color: #29527A;
        border: solid 2px; white;
        fontSize:120%;
        pcolor:white;
        padding:10px;
        paddingLeft:30px;
        textTransform:capitalize;
    }

也可以，我將.css包含在我的頁面中，其他地方在頁面上

Answer 1

popupMenuBody.className = "class_name";

Answer 2

popupMenuBody.className = "my class";

.popups
    {
        background-color: #29527A;
        border: solid 2px white;
        font-size: 120%;
        color: white;
        padding: 10px;
        padding-left: 30px;
        text-transform: capitalize;
    }

Answer 3

使用jQuery addClass？ http://api.jquery.com/addClass/

Answer 4

我會使用Jquery和addClass（）來做到這一點：

$('#addressFullSpan').addClass('name')

Answer 5

jQuery具有方法addClass()將CSS類應用於元素

http://api.jquery.com/addClass/

Answer 6

你有沒有嘗試過 ：

var addressPopupMenu = window.createPopup();
function showAddressPopup() {
    var popup = document.getElementById('addressFullSpan');
    popupMenuBody = popupMenu.document.body;
    popupMenuBody.className = "className";
    ...
}

Answer 7

要將CSS類分配給用JavaScript創建的元素，只需使用以下代碼行：

popupMenuBody.className = "popups";

您已經說過這行不通，但這實際上是因為CSS損壞了。 我假設您已經將一些JavaScript復制/粘貼到CSS文件中並對其進行了一些更改，因此，您的屬性名稱全都錯誤。 您的CSS實際需要的是：

.popups
{
    background-color: #29527A;
    border: solid 2px white;
    font-size:120%;
    color:white;
    padding:10px;
    padding-left:30px;
    text-transform:capitalize;
}

請注意，我有：

1. 刪除了“;” 在“ 2px”和“ white”之間
2. 將“ fontSize”重命名為“ font-size”
3. 將“ pcolor”重命名為“ color”
4. 將“ paddingLeft”重命名為“ padding-left”

您的CSS現在應該正確應用了。

Answer 8

為了避免覆蓋popupMenuBody上的現有類名，請執行以下操作：

popupMenuBody.className += ' class_name';