Dostęp do CSS właściwość niestandardową (aka CSS zmienną) poprzez JavaScript

Jak uzyskać i ustawić właściwości CSS niestandardowych (te dostępne z var(…) w arkuszu stylów) przy użyciu JavaScript (zwykły lub jQuery)?Dostęp do CSS właściwość niestandardową (aka CSS zmienną) poprzez JavaScript

Oto moja nieudana próba: klikając na przycisk zmienia zwykły font-weight nieruchomość, ale nie własność zwyczaj --mycolor:

<html> 
<head> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> 
    <style> 
    body { 
     --mycolor: yellow; 
     background-color: var(--mycolor); 
    } 
    </style> 
</head> 
<body> 

    <p>Let's try to make this text bold and the background red.</p> 
    <button onclick="plain_js()">Plain JS</button> 
    <button onclick="jQuery_()">jQuery</button> 

    <script> 
    function plain_js() { 
    document.body.style['font-weight'] = 'bold'; 
    document.body.style['--mycolor'] = 'red'; 
    }; 
    function jQuery_() { 
    $('body').css('font-weight', 'bold'); 
    $('body').css('--mycolor', 'red'); 
    } 
    </script> 
</body> 
</html>

Źródło

2016-03-18 MarcZ

jest 'var' obsługiwana w CSS? –

@Gothdo Tak, istnieje. https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables Jest jednak nadal eksperymentalny. Również jego cel nie jest przeznaczony dla rzeczy, które zmieniasz w czasie wykonywania, ale dla łatwości konserwacji. Jeśli chcesz rzeczy można zmienić spojrzenie na [atr] (https://developer.mozilla.org/en/docs/Web/CSS/attr) – ste2425

zmienne CSS funkcja eksperymentalna ... I nie oczekiwać, aby thema być dostępne przez JS. Mogę się mylić ... Ale dlaczego nie skorzystać z FireBug i oczekiwać elementów DOM, aby się samemu dowiedzieć? – Connum

Można użyć document.body.style.setProperty('--name', value);:

var bodyStyles = window.getComputedStyle(document.body); 
var fooBar = bodyStyles.getPropertyValue('--foo-bar'); //get 

document.body.style.setProperty('--foo-bar', newValue);//set

Więcej informacji here.

Źródło

2016-03-18 15:56:13 CMedina

Czy zestaw aktualizuje również wszelkie odniesienia do tej zmiennej w CSS? – ste2425

Może być używana jako zmienna globalna, która może się zmieniać bez ładowania nowego pliku CSS – CMedina

Dla każdego, kto chce uzyskać lub ustawić właściwość na etykiecie '' zamiast treści: Możesz uzyskać do niej dostęp za pomocą 'document.documentElement '. – thutt

Poniższy przykład ilustruje, w jaki sposób można zmienić tło za pomocą JavaScript lub jQuery, korzystając z niestandardowych właściwości CSS znanych również jako zmienne CSS (więcej informacji: here). Bonus: kod wskazuje również, w jaki sposób można użyć zmiennej CSS do zmiany koloru czcionki.

function plain_js() { 
 
    // need DOM to set --mycolor to a different color 
 
    d.body.style.setProperty('--mycolor', 'red'); 
 
     
 
    // get the CSS variable ... 
 
    bodyStyles = window.getComputedStyle(document.body); 
 
    fontcolor = bodyStyles.getPropertyValue('--font-color'); //get 
 
    
 
    // ... reset body element to custom property's new value 
 
    d.body.style.color = fontcolor; 
 
    d.g("para").style["font-weight"] = "bold"; 
 
    this.style.display="none"; 
 
    }; 
 

 
    function jQuery_() { 
 
    $("body").get(0).style.setProperty('--mycolor','#f3f'); 
 
    $("body").css("color",fontcolor); 
 
    $("#para").css("fontWeight","bold"); 
 
    $(this).css("display","none"); 
 
    } 
 
    
 
var bodyStyles = null; 
 
var fontcolor = ""; 
 
var d = document; 
 

 
d.g = d.getElementById; 
 
d.g("red").addEventListener("click",plain_js); 
 
d.g("pink").addEventListener("click",jQuery_);

:root { 
 
    --font-color:white; 
 
    --mycolor:yellow; 
 
    } 
 
    body { 
 
     background-color: var(--mycolor); 
 
     color:#090; 
 
    } 
 
    
 
    #para { 
 
    font: 90% Arial,Helvetica; 
 
    font-weight:normal; 
 
    } 
 
    
 
    #red { 
 
     background:red; 
 
    } 
 
    
 
    #pink { 
 
     background:#f3f; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 
 
<p id="para">Let's try to make the background red or pink and change the text to white and bold.</p> 
 
    <button id="red">Red</button> 
 
    <button id="pink">Pink</button>

Należy zauważyć, że z jQuery, aby ustawić właściwość niestandardową do wartości differnt, to response rzeczywiście posiada odpowiedź. Wykorzystuje element body za get() metodę, która umożliwia dostęp do podstawowej struktury DOM i zwraca element ciała, ułatwiając w ten sposób kod ustawiając właściwość niestandardową --mycolor do nowej wartości.

Źródło

2017-06-22 11:31:22 slevy1

Dostęp do CSS właściwość niestandardową (aka CSS zmienną) poprzez JavaScript

Odpowiedz

Powiązane problemy