CSS Özel Özellikleri (Değişkenler)
var() işlevi, özel bir özelliğin değerini eklemek için kullanılabilir.
var() İşlevi
CSS’deki değişkenler, kapsamını tanımlayan bir CSS seçicisi içinde bildirilmelidir. Genel bir kapsam için ya :root veya body selector kullanabilirsiniz.
Değişken ismi iki tire (-) ile başlamalı ve büyük / küçük harf duyarlılığına dikkat edilmelidir!
var() işlevinin sözdizimi aşağıdaki gibidir:
1 2 3 | var(--degisken-adi, degeri) |
Aşağıdaki örnek ilk önce “–main-bg-color” adında bir genel özel özellik tanımlar, ardından özel özelliğin değerini stil sayfasına daha sonra eklemek için var() işlevini kullanır:
1 2 3 4 5 6 7 8 9 10 11 12 13 | :root { --main-bg-color: coral; } #div1 { background-color: var(--main-bg-color); } #div2 { background-color: var(--main-bg-color); } |
Aşağıdaki örnek, birkaç özel özellik değeri eklemek için var() işlevini kullanır:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | :root { --main-bg-color: coral; --main-txt-color: blue; --main-padding: 15px; } #div1 { background-color: var(--main-bg-color); color: var(--main-txt-color); padding: var(--main-padding); } #div2 { background-color: var(--main-bg-color); color: var(--main-txt-color); padding: var(--main-padding); } |
JavaScript’te Değerleri Değiştirme
Özel özelliklerin değerlerini JavaScript’te kullanmak, tıpkı standart özellikler gibidir.
1 2 3 4 5 6 7 8 9 10 | // satır içi stilden değişken al element.style.getPropertyValue("--my-var"); // her yerden değişken olsun getComputedStyle(element).getPropertyValue("--my-var"); // satır içi stilde değişken ayarla element.style.setProperty("--my-var", jsVar + 4); |
Kaynak:
https://www.w3schools.com/css/css3_variables.asp
Yorum Yap