come aggiungere un id ad una class già esistente

**Mood98** · 09-06-2017, 08:44

ho questa class:

codice:

<div class="prova">prova</div>

vorrei trasformarlo così:

codice:

<div class="prova" id="primaProva">prova</div>

come faccio?
Grazie.

**KillerWorm** · 09-06-2017, 09:55

Cerca di essere più preciso; le indicazioni che hai dato sono abbastanza incomplete per poterti dare una soluzione mirata. Bisogna capire qual'è l'esatto contesto in cui devi effettuare questa cosa e quali i criteri che vuoi usare.

In generale, per "selezionare" via JavaScript un elemento con una certa classe, si possono usare vari metodi. Alcuni tra questi sono: getElementsByClassName(), querySelectorAll(), querySelector(), o ancora altri metodi usando jQuery o altre librerie/framework JavaScript.

Tieni comunque presente che le classi non hanno la prerogativa di essere univoche, come invece devono esserlo gli id; questo significa che possono esistere diversi elementi, nel tuo documento HTML, che hanno la stessa identica classe, mentre non puoi applicare uno stesso id a questi (se non ad uno solo). Devi quindi stabilire quali criteri adottare per compiere quello che stai chiedendo.

Se ad esempio ti interessa selezionare solo il primo elemento con tale classe (a prescindere che ce ne sia uno o mille), e quindi applicargli un id, puoi fare una cosa del genere:

codice:

<!DOCTYPE HTML>
<html>
  <head>
    <title>Esempio</title>
    <meta charset="utf-8">
    <style type="text/css">
      .prova{ color: green; }
      #primaProva{ background: red; }
    </style>
  </head>
  <body>
    Entrambe gli elementi di classe <i>prova</i> avranno il testo con colore verde,
    ma solo il primo, a cui sarà applicato id <i>primaProva</i>, avrà sfondo rosso.
    <hr>
    
    <div class="prova">elemento 1 .prova</div>
    <div class="prova">elemento 2 .prova</div>
    
    <script type="text/javascript">
      var primoElementoConClasseProva = document.querySelector(".prova");
      primoElementoConClasseProva.id = "primaProva";
    </script>
    
  </body>
</html>

Il metodo querySelector() infatti va a selezionare solo il primo elemento restituito in base ai criteri di ricerca, a differenza di altri metodi che potrebbero restituire delle collezioni di elementi e andrebbero gestiti diversamente.

**Mood98** · 09-06-2017, 14:39

mi scuso se non sono stato preciso nei dettagli della mia richiesta...
devo realizzare un javascript inject che mi aggiunga un id in una class.
per esempio...
se ho questa class
<divclass="prova">prova</div>
devo sapere come inserire un id in una determinata class, per ottenere il risultato sottostante
<divclass="prova"id="primaProva">prova</div>

**KillerWorm** · 09-06-2017, 15:04

Direi che non hai aggiunto nulla di che a ciò che avevi già detto sul primo post.
Ad ogni modo ti sono state date delle risposte, vedi se riesci a risolvere con quanto già ti è stato consigliato.

**Mood98** · 09-06-2017, 15:06

ho visto lo script che mi avevi postato, ovvero:

<script type="text/javascript">
var primoElementoConClasseProva = document.querySelector(".prova");
primoElementoConClasseProva.id ="primaProva";
</script>

ma non riesco a capire questo passaggio:

document.querySelector(".prova");

**KillerWorm** · 09-06-2017, 15:08

ma non riesco a capire questo passaggio:
document.querySelector(".prova");

Cosa non capisci esattamente?
Hai letto la documentazione che ti ho anche linkato proprio in riferimento a quel metodo?

EDIT:
oops.. proprio quel link è rotto

mi sono accorto adesso
vedi qui querySelector()

Ad ogni modo basta una googleata per cercare la documentazione.. dai, su

**Mood98** · 09-06-2017, 15:18

risolto... no non avevo letto perchè avevo un errore quando aprivo la pagina, ora ho risolto grazie mille.

Discussione: come aggiungere un id ad una class già esistente

Strumenti discussione

Ricerca discussione

Visualizza

Hybrid View

come aggiungere un id ad una class già esistente

Permessi di invio