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
Modificare i metadati nell'head dell'HTML di una Blazor Web App
Gestire domini wildcard in Azure Container Apps
Eseguire una query su SQL Azure tramite un workflow di GitHub
Configurare policy CORS in Azure Container Apps
Configurare dependabot per aggiornare le dipendenze di terze parti con GitHub Actions
Recuperare un elemento inserito nella cache del browser tramite API JavaScript
Verificare la provenienza di un commit tramite le GitHub Actions
Registrare servizi multipli tramite chiavi in ASP.NET Core 8
Hosting di componenti WebAssembly in un'applicazione Blazor static
Creare alias per tipi generici e tuple in C#
Disabilitare automaticamente un workflow di GitHub (parte 2)
Utilizzare i primary constructor in C#