Добавить правило CSS через jQuery для будущих созданных элементов

У меня есть несколько необычная проблема. Я делал что-то подобное много раз:

$('#selector').css('color','#00f');

Моя проблема в том, что я создаю <div id="selector">, и я вызываю команду выше, и она отлично работает.

Теперь, в другом случае, позже, я удаляю этот элемент из DOM и снова добавляю его позже с тем же идентификатором. Этот элемент теперь не имеет color:#00f.

Можно ли добавить правило в CSS, чтобы оно повлияло на элементы, созданные в будущем, с тем же id/class? Мне нравится jQuery, но все, что было бы с простым JavaScript, было бы неплохо.

Он должен быть динамическим, и я не знаю, какие классы помещать в файл CSS. Кроме того, я планирую изменить один атрибут несколько раз в течение хода приложения. Например, установите color на black, на blue, на red и вернитесь к black.

Я пошел с ответом от @lucassp, и это то, с чем я закончил:

function toggleIcon(elem, classname)
{
    if($(elem).attr('src')=='img/checkbox_checked.gif')
    {
        $(elem).attr('src', 'img/checkbox_unchecked.gif')
        //$('.'+classname).hide();//this was the old line that I removed
        $('html > head').append($('<style>.'+classname+' { display:none; }</style>'));
    }
    else
    {
        $(elem).attr('src', 'img/checkbox_checked.gif')
        //$('.'+classname).show();//this was the old line that I removed
        $('html > head').append($('<style>.'+classname+' { display:block; }</style>'));
    }
}

Я также хочу сказать, что @Nelson, вероятно, самый "правильный", хотя для работы в коде приложения, который всегда хорошо работает, потребуется больше работы, и что не усилия, которые я хочу потратить на данный момент.

Если бы мне пришлось переписать это (или написать что-то подобное) в будущем, я бы посмотрел на detach().

Ответы

Ответ 1

Это должно работать:

var style = $('<style>.class { background-color: blue; }</style>');
$('html > head').append(style);

Ответ 2

Когда вы планируете удалить элементы из DOM, чтобы повторно вставить их позже, используйте .detach() вместо .remove().

Использование .detach() будет сохранять ваш CSS при повторной установке позже. Из документации:

Метод .detach() тот же, что и .remove(), за исключением того, что .detach() сохраняет все данные jQuery, связанные с удаленными элементами. Эта метод полезен, когда удаленные элементы должны быть повторно вставлены в DOM в более позднее время.

Ответ 3

Вот код JavaScript, который я написал ранее, чтобы добавить, удалить и отредактировать CSS:

function CSS(sheet) {

    if (sheet.constructor.name === 'CSSStyleSheet' )
        this.sheet = sheet;
    else if (sheet.constructor.name === 'HTMLStyleElement')
        this.sheet = sheet.sheet;
    else
        throw new TypeError(sheet + ' is not a StyleSheet');
}

CSS.prototype = {
    constructor: CSS,
    add: function( cssText ) {
        return this.sheet.insertRule(cssText, this.sheet.cssRules.length);
    },
    del: function(index) {
        return this.sheet.deleteRule(index);
    },
    edit: function( index, cssText) {
        var i;
        if( index < 0 )
            index = 0;
        if( index >= this.sheet.cssRules.length )
            return this.add(cssText);
        i = this.sheet.insertRule(cssText, index);
        if (i === index)
            this.sheet.deleteRule(i + 1);
        return i;
    }
};

И тогда, если требуется новая таблица стилей, создайте как

var myCss = new CSS(document.head.appendChild( document.createElement('style')));

Ответ 4

Если этот раздел стиля предполагается несколько раз менять, вы можете установить в html файле тег стиля с id:

<style id="myStyleTag">
</style>

то вы можете ссылаться на него с помощью js, редактировать или удалять контент, например:

var style = $('#myStyleTag');
styl.html('.class { background-color: blue; }');

таким образом раздел стиля не станет больше, если вы измените его несколько раз, потому что вы просто не добавляете его в голову, но редактируете его по мере необходимости.

Ответ 5

Лучшим вариантом было бы добавить класс:

.selected {
    color : #00f ;
}

$('#elemId').addClass('selected')

Ответ 6

Вы можете использовать плагин livequery.

$('#selector').livequery(function() { $(this).css('color', '#00f'); });

Ответ 7

Создайте правило CSS в вашем файле CSS

.yourclass{
    color: #00f;
}

Добавьте yourclass всякий раз, когда вы создаете элемент:

$("#selector").addClass("yourclass");

Ответ 8

Просто используйте класс, например:

CSS

.setcolor { color: #fff; }

JavaScript:

$('#selector').addClass('setcolor');

Затем удалите его при необходимости:

$('#selector').removeClass('setcolor');

Ответ 9

Это старый вопрос с выбранным ответом, но добавление динамического CSS для достижения цели не является необходимым и, скорее всего, отправляет людей в неправильном направлении.

Если вы хотите динамически устанавливать стили в элементе с помощью jQuery, лучше использовать .addClass() и .removeClass() с классами, которые влияют на требуемый стиль.

Учитывая функцию в вопросе:

function toggleIcon(elem, classname)
    {
      if($(elem).attr('src')=='img/checkbox_checked.gif')
    {
        $(elem).attr('src', 'img/checkbox_unchecked.gif');
        $("." + classname).addClass("hidden");
    }
    else
    {
        $(elem).attr('src', 'img/checkbox_checked.gif');
        $("." + classname).removeClass("hidden");
    }
}

А потом просто добавьте это в свой CSS:

.hidden {display: none;}

Это также сработает, чтобы изменить цвет, также упомянутый в вопросе:

.checkbox-red {color: red;}
.checkbox-blue {color: blue;}

Ответ 10

Попробуйте это

var style = $('<style>.class { background-color: blue !important; }</style>');
$('html > head').append(style);