Изменить атрибуты класса CSS с помощью JavaScript? - PullRequest
Новая
       6

Изменить атрибуты класса CSS с помощью JavaScript?

6 голосов
/ 24 февраля 2009

У меня определен класс 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

Спасибо!

1 Ответ

4 голосов
/ 24 февраля 2009

Я думаю, это то, что вы хотите: 

<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> и добавят новое правило.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...