Question

目前我正在做这样的事情：

function newFont(newSizeA, newSizeB) {

    var elem =  document.getElementById('style-1');

    if (typeof(elem) != 'undefined' && elem != null) {
        removeChildNodes(elem); // function that removes child 
        nodesremoveNode(elem);
    }

    var styleText = ".a { font-size:" + newSizeA + "px; } .b { font-size:" + newSizeB + "px; }";
    var x = document.createElement('style');

    x.setAttribute("type", "text/css");
    x.setAttribute("id", "style-1");

    if (x.styleSheet) { // for IE
        x.styleSheet.cssText = styleText;
    } 
    else { // others
        var textnode = document.createTextNode(styleText);
        x.appendChild(textnode);
    }
}

关键是有一个循环发生，另一个功能是测量菜单的大小，以确保当有人改变字体大小时它适合一个位置。

我想知道，有没有更好的方法来创建和操作元素？我需要更改填充和字体大小，但现在你可以看到我只是完全删除它并重新创建它。

Answer 1

我认为最简单的方法是为不同的字体大小准备几个css样式，然后将它们附加为：

function newFont(targetElement, fontSize) {
    document.getElementById(targetElement).className = fontSize;
}


newFont('myElement','bigFont');

css风格将是：

.bigFont {
    font-size: 5em;
}

如果你想添加样式do：

 document.getElementById("MyElement").className += "MyClass";

如果您想删除样式或检查样式是否已经过了，请参考以下完美答案： Change an element's class with JavaScript

动态添加和更新样式块

1 个答案: