用javascript改变CSS类属性？

Question

我定义了一个CSS类,调用它:

<style type="text/css">
.Foo { position: fixed; left: 50px; top: 50px; }
</style>

我绝对在屏幕上放置一个元素的地方.在我的网页执行过程中,我创建并删除了许多元素并给它们上课Foo.当我调整浏览器的大小时,我想更改类上的left和top值,Foo以便在计算结果时更改所有 Foo元素的位置.

我不想简单地更改样式表,我想计算一个值,并使所有当前和未来的Foo元素都具有新的计算值left和top值.

这个网站有一个例子,但代码相当复杂. http://www.shawnolson.net/a/503/altering-css-class-attributes-with-javascript.html

是否有一种良好,干净的方式来基本上以编程方式改变Foo定义的内容？

谢谢!

Answer 1

我想这就是你想要的：

<script>
var style;
function changeFoo(left, top) {
    if(typeof style == 'undefined') {
        var append = true;
        style = document.createElement('style');
    } else {
        while (style.hasChildNodes()) {
            style.removeChild(style.firstChild);
        }
    }
    var head = document.getElementsByTagName('head')[0];
    var rules = document.createTextNode(
        '.Foo { left: ' + left + 'px; top: ' + top + 'px; }'
    );

    style.type = 'text/css';
    if(style.styleSheet) {
        style.styleSheet.cssText = rules.nodeValue;
    } else {
        style.appendChild(rules);
    }
    if(append === true) head.appendChild(style);
}
</script>

此代码是根据此问题中提供的答案修改的，该答案与您提出的问题非常相似。每当您需要更改所有 .Foo 元素的位置时，只需调用changeFoo(newLeftValue, newTopValue); - 第一次将创建<style>元素并将其添加到<head文档的 > 中。后续调用将仅清空<style>已添加的元素并添加新规则。