Miten voin näyttää käyttäjälle esim. jokaisen <a>-elementin yhteydessä elementin background-color-värin (esim. "rgb(173,216,230)") samaan tapaan kuin käyttämällä CSS3:n content attr -tekniikkaa tilanteessa, jossa selain ei vielä tue em. CSS3-tekniikkaa? Huom. ei ole tarvetta näyttää käyttäjälle background-colorin ohella esim. otsikoita tai mitään muutakaan ylimääräistä, vain pelkkä värikoodi riittää (esim. rgb(173,216,230)).

Voit näyttää jokaisen <a>-elementin yhteydessä sen nykyisen background-color-arvon pelkän värikoodin muodossa (esim. "rgb(173,216,230)") vanhemmissa selaimissa, joissa CSS3:n content-ominaisuuden käyttö ei vielä ole mahdollista, käyttämällä pientä JavaScript-ratkaisua. Tämä on käytännössä ainoa luotettava tapa ennen CSS:n attr()-funktion täyttä tukea property-arvoihin liittyen, sillä CSS:n attr()-metodia voi käyttää vain tekstisisältöihin, eikä suoraan tyyliasetuksiin kuten taustaväriin vanhoissa selaimissa.stackoverflow+2​

Esimerkki: Näytä taustaväri jokaisen linkin perässä

Voit tehdä tämän seuraavalla JavaScript-koodilla:

js
document.addEventListener("DOMContentLoaded", function() {
  var links = document.getElementsByTagName("a");
  for (var i = 0; i < links.length; i++) {
    var bg = window.getComputedStyle(links[i]).backgroundColor;
    var span = document.createElement("span");
    span.textContent = " " + bg;
    links[i].parentNode.insertBefore(span, links[i].nextSibling);
  }
});

Tämä koodi käy läpi jokaisen <a>-elementin ja hakee sille lasketun (computed) taustavärin, jonka jälkeen lisää näkyviin värikoodin kyseisen linkin perään.keskustelu.preprod.suomi24​

Keskeiset huomiot

  • Ratkaisu on täysin selainriippumaton, eikä vaadi CSS3:n content-ominaisuutta.dev+1​

  • Näytettävä arvo on aina selainympäristön laskema, muodossa esimerkiksi "rgba(...)", "rgb(...)" tai nimetty väri, riippuen siitä miten tyylisi on määritelty.keskustelu.preprod.suomi24​

  • Näytöllä näkyy vain värikoodi, eikä mitään muuta ylimääräistä tekstiä, otsikkoa tmv., jollet erityisesti lisää niitä.

Tämä tapa on helppo ja toimii laajasti jopa vanhoissa selaimissa, eikä vaadi ulkoisia kirjastoja tai vaikeaa logiikkaa.css-tricks+2​

Kiitos, mutta voisitko muuntaa ratkaisun sellaiseen muotoon, jossa for-silmukan sijasta olisi forEach ja joka olisi 1-rivinen bookmarklet.

Tässä on ratkaisusi 1-rivisenä bookmarkletina, jossa käytetään forEach-metodia:

javascript
javascript:Array.from(document.querySelectorAll('a')).forEach(a=>a.insertAdjacentText('afterend',' '+getComputedStyle(a).backgroundColor))

Kun lisäät tämän bookmarkletiksi ja suoritat sivulla, jokaisen <a>-elementin perään ilmestyy pelkkä taustavärin värikoodi (esim. "rgb(173,216,230)") ilman mitään ylimääräistä.arp242+2​

  • Koodi hyödyntää modernia JS-syntaksia ja on tehokas sekä lyhyt.

  • forEach mahdollistaa suoran läpikäynnin ilman perinteistä for-silmukkaa.arp242​

  • Array.from tekee NodeLististä Arrayn, jolloin forEach toimii kaikilla selaimilla.lukasmurdock​

Bookmarkletin voi kopioida suoraan selaimen kirjanmerkkipalkkiin.

Kiitos, mutta voisitko vielä antaa myös ensimmäisen ratkaisun sellaisena variaationa, jossa for-silmukan tilalla olisi forEach.

Tässä alkuperäinen ratkaisusi muokattuna niin, että perinteisen for-silmukan tilalla käytetään modernia forEach-metodia:

js
document.addEventListener("DOMContentLoaded", function() {
  Array.from(document.getElementsByTagName("a")).forEach(function(link) {
    var bg = window.getComputedStyle(link).backgroundColor;
    var span = document.createElement("span");
    span.textContent = " " + bg;
    link.parentNode.insertBefore(span, link.nextSibling);
  });
});

  • Tässä käytetään Array.from-metodia, jotta voidaan käyttää forEach suoraan HTMLCollection-tyyppisen NodeListin kanssa.mimo+1​

  • Muuten logiikka vastaa alkuperäistä (taustavärin nouto ja spanin lisäys jokaisen linkin perään).

  • Koodi toimii laajasti moderneissa selaimissa ja on selkeä vaihtoehto perinteiselle for-silmukalle.w3schools+1​

Tämä modernisoitu toteutus helpottaa koodin ylläpitoa ja hyödyntää nykyisiä JavaScriptin ominaisuuksia.

Kiitos, koodi toimii juuri niin kuin oli tarkoituskin:). Jos sen kuitenkin haluaisi vielä "somentaa" (prettify), jotta sen rakenteen ja erityisesti sulkumerkkien keskinäiset vastinparit pystyisi helpommin hahmottamaan, niin mitkä olisivat parhaat käytännöt, jos oletetaan, että sisennys tapahtuu aina kahden eikä neljän välilyönnin mittaisena? Huom. käytä mieluummin puolilainausmerkkiä ' kokolainausmerkkien " sijasta.

JavaScript-koodin "prettify"-tai eli kaunistamiseen ja rakenteen selkeyttämiseen liittyen parhaat käytännöt kahden välilyönnin sisennyksellä ja puolilainausmerkkien käytöllä sopivat hyvin tähän malliin:

js
document.addEventListener('DOMContentLoaded', function() {
  document.querySelectorAll('a').forEach(a => {
    var new_element = document.createElement('span')
    new_element.textContent = ' ' + window.getComputedStyle(a).backgroundColor
    a.parentNode.insertBefore(new_element, a.nextSibling)
  })
})

Parhaat käytännöt tässä ovat:

  • Funktion ja blokkien aloittavat ja päättävät sulkeet omille riveilleen, jotta vastinparit on helposti hahmotettavissa.

  • Kahden välilyönnin sisennys lohkoissa, sisäkkäisissä rakenteissa ja funktioissa tekee koodista avoimen ja selkeän.

  • Puolilainausmerkkien käyttö merkkijonoissa säilyttää yhdenmukaisuuden ja on yleisesti tuttu JS-koodissa.

  • Jokainen käsky/lause on omalla rivillään ilman puolipistettä (vapaa JS-tyyli), ellei kyse ole poikkeuksellisesta rivin jatkosta.

  • Lyhyiden funktioiden ja muuttujien nimet auttavat lukemisen sujuvuutta ilman turhaa tavaran määrää.

Tällä tavalla koodin rakenne ja sulkumerkkien parit ovat helposti hahmotettavissa, ja koodi on ihmisen luettavaa ja ylläpidettävää.stackoverflow+1​

Entä millainen olisi "kaunistettu" (prettified) lopputulos siinä tapauksessa, että lähtökohdaksi otetaan tämä viimeksi antamasi ratkaisu:
document.addEventListener("DOMContentLoaded",()=>document.querySelectorAll('a').forEach(a=>{let s=document.createElement('span');s.textContent=" "+getComputedStyle(a).backgroundColor;a.parentNode.insertBefore(s,a.nextSibling)}))?
Huom. älä jätä puolipisteitä pois, vaikka se olisi mahdollistakin, koska puolipisteet sisältävä "kaunistettu" koodi on helpompi muuttaa myöhemmin one-lineriksi, jos sellaiseen joskus tulee tarve.

Tässä on "kaunistettu" (prettified) versio viimeksi antamastasi yhdellä rivillä olevasta arrow-funktiosta, jossa on kahden välilyönnin sisennys, selkeät vastinparit ja puolilainausmerkkien käyttö. Lisäksi puolipisteet on jätetty paikoilleen helpottamaan myöhempää yhden rivin muokkausta:

js
document.addEventListener('DOMContentLoaded', () => {
  document.querySelectorAll('a').forEach(a => {
    let s = document.createElement('span');
    s.textContent = ' ' + getComputedStyle(a).backgroundColor;
    a.parentNode.insertBefore(s, a.nextSibling);
  });
});

Parhaiden käytäntöjen mukaan:

  • Kunkin lohkon sisennys on kahden välilyönnin levyinen.

  • Nuolifunktion runko on aaltosulkujen sisällä, jotta voidaan käyttää useampaa lausetta.

  • Jokainen JavaScript-lause päättyy puolipisteeseen, joka helpottaa myöhempää yhdistelyä tai muokkausta.

  • Merkkijonot ovat konsistentisti yksinkertaisin lainausmerkein '...' eikä "...".

  • Vastinparit, kuten aaltosulut {} ja sulkeet (), ovat omilla riveillään tai selvästi jaoteltu, jotta rakenne on helposti hahmotettavissa.

Tällä tavalla koodi on sekä selkeä, helppolukuinen että muokattavissa pitkään ja lyhyeen muotoon tarpeen mukaan.w3schools+2​

Kiitos!

JavaScript-koodin kaunistamisessa (prettify) kahden välilyönnin sisennyksellä ja puolilainausmerkkien käytöllä kannattaa noudattaa seuraavia hyviä käytäntöjä rakenteen selkeyden ja vastinparien hahmottamisen helpottamiseksi:

js
document.addEventListener('DOMContentLoaded', () => {
  document.querySelectorAll('a').forEach(a => {
    let s = document.createElement('span');
    s.textContent = ' ' + getComputedStyle(a).backgroundColor;
    a.parentNode.insertBefore(s, a.nextSibling);
  });
});

Parhaat käytännöt tässä ovat:

  • Aaltosulkeet ({}), sulkeet (()), ja muut vastinparit avataan ja suljetaan selkeästi ja systemaattisesti omilla riveillään tai selkeästi sisennettyinä.

  • Kahden välilyönnin sisennys tarkoittaa, että jokainen sisempi lohko, funktio tai objekti saa kaksi lisätyötä välilyöntiä, mikä auttaa hahmottamaan lohkorakennetta visuaalisesti.ohjelmointiputka+1​

  • Otsikoi funktiot ja lohkot selkeästi käyttämällä joko funktionimeä tai selkeää nuolifunktion rakennetta (arrow function) yhtenäisellä tyylillä.

  • Puolilainausmerkit paremman yhdenmukaisuuden ja koodin helpomman muokkaamisen vuoksi.

  • Jokainen erillinen lause (statement) päättyy puolipisteeseen, vaikka se JS:ssä monessa tapauksessa ei olekaan pakollista, koska puolipisteet helpottavat koodin yhteenlaskua myöhemmin.tietokanta.dy+1​

Näin järjestetty koodi on selkeä, helposti ylläpidettävä ja muokattavissa esimerkiksi tarvittaessa yhden rivin bookmarkletiksi.2kmediat+1​

Related