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
Testare il failover sulle region in Azure Storage
Utilizzare l nesting nativo dei CSS
Generare un hash con SHA-3 in .NET
Bloccare l'esecuzione di un pod in mancanza di un'artifact attestation di GitHub
Utilizzare il metodo CountBy di LINQ per semplificare raggruppamenti e i conteggi
Recuperare App Service cancellati su Azure
Gestire il colore CSS con HWB
Testare l'invio dei messaggi con Event Hubs Data Explorer
Creare una libreria CSS universale: Cards
Supportare la sessione affinity di Azure App Service con Application Gateway
Loggare le query più lente con Entity Framework
Utilizzare Azure Cosmos DB con i vettori