← Tutti gli esempi

JavaScript Sviluppatori e QA bbc.com

BBC: etichetta i blocchi data-component

Aiuto per sviluppatori: contorna ed etichetta ogni elemento con attributo data-component con il suo nome.

Codice da copiare

// Developer aid: label every [data-component] block
(function () {
  document.querySelectorAll('[data-component]').forEach(function (el) {
    if (el.dataset.jzLabelled) { return; }
    el.dataset.jzLabelled = '1';
    el.style.outline = '1px solid rgba(184,0,0,0.4)';
    var tag = document.createElement('span');
    tag.textContent = el.getAttribute('data-component');
    tag.style.cssText = 'background:#b80000;color:#fff;font:10px monospace;' +
      'padding:1px 3px;display:inline-block';
    el.insertBefore(tag, el.firstChild);
  });
})();

Come usare questo esempio

  1. Copia il codice con il pulsante qui sopra.
  2. Installa JustZix (2 minuti) e apri l'estensione sulla pagina di destinazione.
  3. Aggiungi una nuova regola corrispondente a quella pagina.
  4. Incolla il codice nel pannello JavaScript della regola e salva — viene eseguito a ogni visita della pagina.

Valuta questo esempio

Nessuna valutazione — sii il primo.

Questo esempio funziona?

Gli snippet sono inutili senza un posto dove incollarli.

JustZix si installa in 2 minuti ed esegue il tuo codice su ogni pagina corrispondente. Senza account, senza pagamento.

Scarica gratis Guarda i casi d'uso