我怎样才能给javascript元素一个CSS类?

时间:2011-03-07 11:49:53

标签: javascript css

我有以下代码

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,它在页面上的其他地方

8 个答案:

答案 0 :(得分:5)

popupMenuBody.className = "class_name";

答案 1 :(得分:1)

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;
    }

答案 2 :(得分:0)

使用jquery addClass? http://api.jquery.com/addClass/

答案 3 :(得分:0)

我会使用Jquery和addClass()

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

答案 4 :(得分:0)

jQuery使用方法addClass()将CSS类应用于元素

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

答案 5 :(得分:0)

你试过了吗?

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

答案 6 :(得分:0)

要将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”
  5. 现在应该正确应用您的CSS。

答案 7 :(得分:0)

为避免覆盖popupMenuBody上的现有类名,请执行以下操作:

popupMenuBody.className += ' class_name';