jQuery

Question

का उपयोग कर सीएसएस चर बदलें बदलें क्या jQuery का उपयोग कर सीएसएस में उपयोग किए गए चर को बदलना संभव है? सरल उदाहरण:

html { 
 
    --defaultColor: teal; 
 
} 
 
.box { 
 
    background: var(--defaultColor); 
 
    width: 100px; 
 
    height: 100px; 
 
    margin: 5px; 
 
    float: left; 
 
} 
 
.circle { 
 
    background: #eee; 
 
    border: 2px solid var(--defaultColor); 
 
    width: 100px; 
 
    height: 100px; 
 
    margin: 5px; 
 
    float: left; 
 
    border-radius: 100%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id="clickToChange" type="button" style="width: 100%;">Click to Change</button> 
 
<div class="box"></div> 
 
<div class="box"></div> 
 
<div class="box"></div> 
 
<br/> 
 
<div class="circle"></div> 
 
<div class="circle"></div> 
 
<div class="circle"></div>

मैं कैसे उदाहरण के लिए लाल को चैती से चर रंग बदल सकते हैं? यह काम नहीं करता है।

$("#clickToChange").click(function(){ 
    $(html).css("--defaultColor", "red"); 
}); 

Answer 1

आप का उपयोग कर सीएसएस चर बदल सकता है सादा जावास्क्रिप्ट elem.style.setProperty("variableName", "variableProp");

$("html").on('click', function() { 
 
    
 
    $("body").get(0).style.setProperty("--color", "hotpink"); 
 
    
 
});

body { 
 
    --color: blue; 
 
    background-color: var(--color); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
click me!

Answer 2

सरल समाधान IMHO: एक वर्ग बदलें, बारी में डिफ़ॉल्ट रंग बदल जाता है कि:

html { 
    --defaultColor: teal; 
} 
html.someOtherDefaultColor { 
    --defaultColor: rebeccapurple; 
} 

$("#clickToChange").click(function(){ 
    $(html).toggleClass("someOtherDefaultColor"); 
}); 

Answer 3

questi देखें Setting a CSS custom property (aka CSS variable) through JavaScript or jQuery

प्रश्न में विधि document.body.style.setProperty($property, value); है जहां $ संपत्ति सीएसएस चर है।