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>

此代码是根据this question中提供的答案修改的，这与您提出的答案非常相似。每当你需要改变所有.Foo元素的位置时，你只需调用changeFoo（newLeftValue，newTopValue）; - 第一次创建<style>元素并将其添加到<head＆gt;该文件。后续调用只会清空已添加的<style>元素并添加新规则。

用javascript改变CSS类属性？

1 个答案: