Durante lo sviluppo di un'aplicazione web si ha spesso la necessità di dare a un attributo CSS un valore dinamico in base a criteri stabiliti dall'applicazione. Ad esempio, potremmo avere la necessità di modificare il colore del testo o dello sfondo, di dare una dimensione diversa in base al testo, impostare un testo e molto altro ancora. In questi casi possiamo ricorrere alla funzione attr di CSS3.
Grazie a questa funzione, possiamo prendere il valore di un attributo del tag a cui applichiamo la classe CSS e mettere questo valore come valore di una proprietà CSS. prendiamo come esempio il seguente codice.
<p data-text="hello">world</p>
p::before { content: attr(data-text) " "; }
In questo esempio, diciamo che prima di tutti i tag p viene applicato il testo presente nell'attributo data-text. In questo altro esempio vediamo invece come impostare un colore di sfondo.
<div class="background" data-background="green"></div>
.background { background-color: red; } .background[data-background] { background-color: attr(data-background color); }
In questo caso, il tag div ha la classe background che applica uno sfondo rosso. Tuttavia, con l'attributo data-background andiamo a impostare uno sfondo verde.
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Potenziare Azure AI Search con la ricerca vettoriale
Verificare la provenienza di un commit tramite le GitHub Actions
Definire lo stile CSS in base alle dimensioni del container
Sostituire la GitHub Action di login su private registry
Miglioramenti agli screen reader e al contrasto in Angular
Miglioramenti nelle performance di Angular 16
Gestire domini wildcard in Azure Container Apps
Supportare il sorting di dati tabellari in Blazor con QuickGrid
Eseguire le GitHub Actions offline
Sfruttare lo stream rendering per le pagine statiche di Blazor 8
Controllare gli accessi IP alle app con Azure Container Apps
Determinare lo stato di un pod in Kubernetes