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
Modern web apps with Blazor
Utilizzare servizi applicativi durante la validazione in ASP.NET Core
Montare un volume Docker su blob con Azure App Service Linux
Ottimizzare costi e prestazioni con Azire SQL Database serverless
Passare valori a un component in ReactJS
Creare un interceptor in Entity Framework Core 3
Visual Studio 2019 sarà disponibile a partire dal 2 Aprile
Realizzare applicazioni Windows con React Native
Usare i file di risorse con ASP.NET Core
Gestire il power state di un device IoT con la Universal Windows Platform
Renderizzare una lista di oggetti in JSX
Realizzare una griglia con elementi a dimensione dinamica nella Universal Windows Platform