<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<h1>Hello Plunker!</h1>
<p class="text-danger">Text Danger</p>
<p class="text-primary">Text Primary</p>
<p class="alert-danger">Alert Danger</p>
<p class="alert-primary">Alert Primary</p>
<button onclick="changePropertyValue()">CSS Değişken değerini değiştir.</button>
</body>
</html>
:root{
--bg-color-primary: blue;
--text-color-primary: white;
--bg-color-danger: red;
--text-color-danger: white;
}
body {
background-color: black
}
.text-danger {
/* Metin rengini kırmızı renk olarak ayarladığımız --bg-color-danger değişkenini kullanıyoruz. */
color: var(--bg-color-danger)
}
.text-primary {
/* Metin rengini mavi renk olarak ayarladığımız --bg-color-primary değişkenini kullanıyoruz. */
color: var(--bg-color-primary)
}
.alert-primary {
--bg-color-local: green;
padding: 10px;
font-weight: bolder;
/* Arkaplan rengini mavi ve metin rengini beyaz renk olarak ayarladığımız --bg-color-primary ve --text-color-primary değişkenlerini kullanıyoruz. */
background-color: var(--bg-color-local);
color: var(--text-color-primary);
}
.alert-danger {
padding: 10px;
font-weight: bolder;
/* Arkaplan rengini kırmızı ve metin rengini beyaz renk olarak ayarladığımız --bg-color-danger ve --text-color-danger değişkenlerini kullanıyoruz. */
background-color: var(--bg-color-danger);
color: var(--text-color-danger);
}
# CSS Variable Test Page
function changePropertyValue(){
var element = document.querySelector(':root');
var value = getComputedStyle(element).getPropertyValue('--bg-color-primary')
alert('--bg-color-primary değeri ' + value + ' şimdi değiştirilecek.')
element.style.setProperty('--bg-color-primary', value.trim() == 'green' ? 'blue' : 'green')
}