Come abbrevio la sintassi 'style.backgroundColor'?

**KillerWorm** · 04-04-2017, 22:44

Io userei jQuery.

codice:

$('Id').css('backgroundColor','#fff');

Quello che vuoi fare tu, potresti farlo usando in qualche modo eval(), ma in linea di massima è sconsigliato.

Se vuoi richiamare delle proprietà di un oggetto in modo dinamico, puoi usare la sintassi a parentesi quadre. In tal caso dovrai comunque definire singolarmente le varie proprietà. In pratica dovresti definire due variabili, una per "style" e una per "backgroundColor".

Volendo potresti anche utilizzare il sistema di riferimento diretto per selezionare gli elementi del DOM; cioè gli elementi del DOM sono definiti come variabili globali su document e su window. Anziché document.getElementById('Id') potresti scrivere semplicemente Id. Questo sistema ha comunque delle controindicazioni ed è generalmente considerato una cattiva pratica. Esistono poi altri metodi come querySelector() e altri simili. In alternativa potresti però creare una tua funzione con un nome più corto, che "avvolge" il getElementById, in modo da creare un alias di tale metodo; è utile nel caso tu abbia intenzione di utilizzare tale metodo in modo intensivo.

Qui un esempio con riferimento diretto e proprietà richiamate in modo dinamico:

codice:

<!DOCTYPE HTML>
<html>
  <head>
    <title>Esempio</title>
    <meta charset="utf-8">
  </head>
  <body>
    <div id='Id'> ciao </div>
    <script type="text/javascript">
      var css = 'style';
      var bgc = 'backgroundColor';    
      Id[css][bgc] = 'white';
    </script>    
  </body>
</html>

Qui con un alias per getElementById:

codice:

<!DOCTYPE HTML>
<html>
  <head>
    <title>Esempio</title>
    <meta charset="utf-8">
  </head>
  <body>
    <div id='Id'> ciao </div>
    <script type="text/javascript">
      function sel(id) {
        return document.getElementById(id);
      }
    
      var css = 'style';
      var bgc = 'backgroundColor';    
      sel('Id')[css][bgc] = 'red';
    </script>    
  </body>
</html>

Ma tutte queste tecniche, se vedi bene, sono già disponibili e funzionanti in modo egregio con librerie tipo jQuery (una tra le più utilizzate). Per tale motivo la mia affermazione iniziale. Se il tuo scopo è quello di sintetizzare al meglio i tuoi script, perché non affidarsi ad una libreria liberamente utilizzabile, testata e ottimizzata per i vari browser, che lo faccia per te?

**badaze** · 04-04-2017, 23:19

@KillerWorm.

Non conoscevo questa sintassi. Grazie !!!

**KillerWorm** · 05-04-2017, 12:23

E' fattibile scrivere qualcosa tipo questo:
codice HTML:
funzione(['idA','idB'],'style':['backgroundColor':'white','marginTop':'0']);
o è sbagliato?

E' possibile tutto (magari correggendo opportunamente la sintassi) ma dipende sostanzialmente da cosa hai strutturato dietro, per poter elaborare quei dati.

Credimi, non mi è chiaro perché tu stia cercando di fare qualcosa del genere. Vuoi crearti tu una libreria di funzioni per ottenere un codice più sintetico?

In tal caso ti rifaccio la domanda:
[quote]Se il tuo scopo è quello di sintetizzare al meglio i tuoi script, perché non affidarsi ad una libreria liberamente utilizzabile, testata e ottimizzata per i vari browser, che lo faccia per te?[/code]

Ad esempio, questo e come potresti farlo in jQuery:

codice:

$('#idA,#idB').css({backgroundColor:'white', marginTop:'0'});

Sia chiaro, non voglio forzarti ad usare una libreria, ma se il tuo intento è semplicemente quello di poter sviluppare un codice sintetico, non ha alcun senso reinventare l'acqua calda; sarebbe una totale perdita di tempo.

Se invece stai sperimentando qualcosa per te stesso, a motivo di studio o per propria curiosità personale, potrebbe avere più senso, ma in tal caso sarebbe magari necessario avere delle basi più solide riguardo questo tipo di programmazione, prima di cimentarsi con tali esperimenti.

Poi vedi tu

**KillerWorm** · 05-04-2017, 17:32

Prima di rispondere segnalo una cosa: ho cliccato sul tasto 'Rispondi' invece di 'Invia risposta rapida' e mi ha cancellato il messaggio, se potreste cambiarlo in maniera che invii un 'return false' in caso di testo presente all'interno della casella messaggio veloce ve ne sarei grato, perchè probabilmente non sono l'unico malcapitato.

P.S. altro problema, in risposta rapida non vengono codificati correttamente alcuni caratteri speciali e le lettere accentate, forse la codifica messa in risposta rapida è sbagliata.

Grazie per le segnalazioni; esatto, non sei il primo e nemmeno l'ultimo malcapitato, sono problemi noti da tempo e già riportati più volte alla redazione che suppongo ne abbia una catasta piena di segnalazioni del genere

Riferisco comunque all'aministrazione anche queste tue segnalazioni.

Tornando in tema:

Quindi la domanda è jquery come fà a chiudere le parentesi?
Il ').css' come fà ad essere valido dal punto di vista della sintassi?

Bisognerebbe studiare lo sviluppo di tale libreria ma la strada è in salita e di certo andrebbe oltre il seminato di questa discussione. Ribadisco, per realizzare un qualcosa come vuoi fare tu, bisognerebbe avere delle solide fondamenta riguardo la programmazione e, nello specifico, la programmazione ad oggetti.

Non è per scoraggiarti, ma da quel che scrivi mi pare chiaro che ti mancano tali nozioni, per cui sarebbe arduo imbattersi nello sviluppo di robe del genere senza prima essere "passati dal via". Magari dovresti affrontare lo studio iniziando con qualche guida tipo "Costruttori, creare oggetti in JavaScript" per fare proprie le dinamiche della programmazione ad oggetti, per poi passare pian piano allo sviluppo di librerie di funzioni.

Giusto a grandi linee, jQuery ha una struttura basata su un costruttore principale ed è fortemente improntata sull'uso di metodi, i quali (la maggior parte) restituiscono un oggetto jQuery; tale oggetto, ad esempio, può essere una lista di elementi del DOM; per cui, quel .css() non è altro che un metodo dell'oggetto jQuery restituito dal selettore principale $() che andrà ad agire sugli elementi a cui l'oggetto fa riferimento.

Discussione: Come abbrevio la sintassi 'style.backgroundColor'?

Strumenti discussione

Ricerca discussione

Visualizza

Permessi di invio