CSS వివరణాత్మక జావాస్క్రిప్ట్ ద్వారా వేరియబుల్స్ ఉపయోగించడం

వేరియబుల్స్ ను JavaScript ద్వారా మార్చండి

CSS వేరియబుల్స్ DOM ను అనుసంధానిస్తాయి, అంటే మీరు JavaScript ద్వారా వాటిని మార్చవచ్చు.

ఈ ఉదాహరణ మీరు పూర్వ పేజీలో వాడిన ఉదాహరణలో ఉపయోగించిన --blue వేరియబుల్ ను ప్రదర్శించడానికి మరియు మార్చడానికి స్క్రిప్ట్ సృష్టించండి ఎలా చూపుతుంది. ఇప్పుడు మీరు JavaScript అనుభవం లేకపోయినా, ఆందోళన చేయకండి. మీరు JavaScript గురించి మరింత తెలుసుకోవచ్చు: మా JavaScript ట్యూటోరియల్స్ లో మరింత తెలుసుకోండి:

ప్రతిమాత్రము

<script>
// రూట్ ఎలమెంట్ పొందండి
var r = document.querySelector(':root');
// వేరియబుల్ విలువలను పొందే ఫంక్షన్ సృష్టించండి
function myFunction_get() {
  // రూట్ స్టైల్స్ (గుణాలు మరియు విలువలను) పొందండి
  var rs = getComputedStyle(r);
  // బ్లూ వేరియబుల్ విలువను అలర్ట్ చేయండి
  alert("బ్లూ విలువ: " + rs.getPropertyValue('--blue'));
}
// 创建设置变量值的函数
function myFunction_set() {
  // Set the value of variable --blue to another value (in this case "lightblue")
  r.style.setProperty('--blue', 'lightblue');
}

亲自试一试

బ్రౌజర్ సపోర్ట్

పట్టికలో అంకితమైన సంఖ్యలు ఈ అట్రిబ్యూట్ ను పూర్తిగా మద్దతు ఇచ్చే మొదటి బ్రౌజర్ వెర్షన్ ను పేర్కొంటాయి.

ఫంక్షన్
var() 49.0 15.0 31.0 9.1 36.0

CSS var() ఫంక్షన్

ఫంక్షన్ వివరణ
var() CSS వేరియబుల్ విలువను ప్రవేశపెట్టుము.