Domanda Aggiungi la regola CSS tramite jQuery per gli elementi creati in futuro


Ho un problema un po 'insolito. Ho fatto qualcosa di simile molte volte:

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

Il mio problema è che creo a <div id="selector">e chiamo il comando sopra e funziona bene.

Ora, su un altro evento, in seguito, rimuoverò quell'elemento dal DOM e aggiungilo di nuovo in un secondo momento con lo stesso id. Questo elemento ora non ha color:#00f.

C'è un modo in cui posso aggiungere una regola in CSS, in modo che possa influenzare gli elementi creati in futuro con quello stesso id/class? mi piace jQuery, ma qualsiasi cosa con JavaScript semplice andrebbe bene pure.

Deve essere dinamico e non conosco le classi da inserire in un file CSS. Inoltre, ho intenzione di cambiare un singolo attributo alcune volte nel corso dell'applicazione. Ad esempio, impostando il color a black, a blue, a rede di nuovo a black.



Sono andato con la risposta da @lucasspe questo è quello che ho finito con:

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>'));
    }
}

Voglio anche dirlo @Nelson è probabilmente il più "corretto", anche se richiederebbe più lavoro per entrare nel codice dell'applicazione che funziona sempre bene, e questo non è uno sforzo che voglio passare al momento.

Se dovessi riscrivere questo (o scrivere qualcosa di simile) in futuro, esaminerei detach().


44
2017-10-25 19:36


origine


risposte:


Questo dovrebbe funzionare:

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

75
2017-10-25 19:39



Quando prevedi di rimuovere elementi dal DOM per reinserirli in un secondo momento, usa .detach () invece di .remove().

utilizzando .detach() preserverà il tuo CSS quando reinserirai in seguito. Dalla documentazione:

Il metodo .detach () è lo stesso di .remove (), eccetto quello .detach ()   mantiene tutti i dati jQuery associati agli elementi rimossi. Questo   il metodo è utile quando gli elementi rimossi devono essere reinseriti nel   DOM in un secondo momento.


10
2017-10-25 19:38



Ecco alcuni codici JavaScript che ho scritto prima per permettermi di aggiungere, rimuovere e modificare 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;
    }
};

E poi se è richiesto un nuovo foglio di stile, costruisci come

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

5
2017-10-25 19:43



Nel caso in cui questa sezione di stile supponga di essere cambiata più volte, puoi impostare nel file html un tag di stile con id:

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

quindi puoi riferirlo a js, modificare o rimuovere contenuti come:

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

in questo modo la sezione di stile non diventerà più grande se la cambi più volte, perché non la aggiungi semplicemente alla testa, ma la modifica secondo necessità.


4
2017-12-15 15:26



Puoi usare plugin di livequery.

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

1
2017-10-25 19:38



L'opzione migliore sarebbe aggiungere una classe:

.selected {
    color : #00f ;
}

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

1
2017-10-25 19:37



Questa è una vecchia domanda con una risposta scelta, ma l'aggiunta di CSS dinamico per raggiungere l'obiettivo non è necessaria ed è probabile che mandi le persone nella direzione sbagliata.

Se vuoi impostare dinamicamente gli stili su un elemento usando jQuery, è meglio usarlo .addClass() e .removeClass() con le classi che influenzano lo stile richiesto.

Data la funzione nella domanda:

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");
    }
}

E poi aggiungi questo al tuo CSS:

.hidden {display: none;}

Ciò funzionerebbe anche per cambiare colore, come menzionato anche nella domanda:

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

1
2017-10-24 15:06



Crea una regola CSS nel tuo file CSS

.yourclass{
    color: #00f;
}

Inserisci yourclass ogni volta che crei l'elemento:

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

0
2017-10-25 19:38



Basta usare una classe, ad esempio:

CSS:

.setcolor { color: #fff; }

JavaScript:

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

Quindi rimuoverlo quando necessario:

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

0
2017-10-25 19:40



Prova questo

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

-1
2018-04-12 07:33