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
Linting di un Dockerfile con un workflow di GitHub
Gestire undefined e partial nelle reactive forms di Angular
Effettuare il deploy di immagini solo da container registry approvati in Kubernetes
Miglioramenti agli screen reader e al contrasto in Angular
Accesso sicuro ai secrets attraverso i file in Azure Container Apps
Definire lo stile CSS in base alle dimensioni del container
Usare lo spread operator con i collection initializer in C#
Sfruttare i KeyedService in un'applicazione Blazor in .NET 8
Short-circuiting della Pipeline in ASP.NET Core
Eseguire operazioni con timeout in React
Utilizzare l'operatore GroupBy come ultima istruzione di una query LINQ in Entity Framework
Effettuare il pull di git LFS in un workflow di GitHub