CSS Χρήση JavaScript για Αλλαγή Πρότυπων

\u4f7f\u7528\u5b57\u7b26\u8bed\u8a00\u4fee\u6539\u53c2\u6570

CSS \u53c2\u6570\u53ef\u4ee5\u8bbf\u95ee\u5e73\u677f\u7ed3\u6784\u3002\u8fd9\u610f\u5473\u7740\u4f60\u53ef\u4ee5\u901a\u8fc7\u5b57\u7b26\u8bed\u8a00\u4fee\u6539\u5b83\u4eec。

\u8fd9\u4e2a\u4f8b\u5b50\u660e\u793a\u4e86\u5982\u4f55\u521b\u5efa\u811a\u672c\u6765\u6f14\u793a\u548c\u4fee\u6539\u4e0a\u4e00\u9875\u4e2d\u4f7f\u7528\u7684\u4e00\u4e2a\u4ef6\u7b26\u5b57\u2013\u2013blue\u53c2\u6570\u3002\u5f53\u524d\u5982\u6709\u4e0d\u7199\u6240\u4f60\u7684\u5b57\u7b26\u8bed\u8a00\u3002\u4f60\u53ef\u4ee5\u5728\u6211\u4eec\u7684\u5b57\u7b26\u8bed\u8a00\u6559\u7a0b\u4e2d\u5b66\u5230\u6700\u597d\u7684\u5b57\u7b26\u8bed\u8a00\u77e5\u8bc6\uff1a

\u5b9e\u4f8b

<script>
// \u83b7\u53d6\u6839\u5143\u7d20
var r = document.querySelector(':root');
// \u521b\u5efa\u83b7\u53d6\u53c2\u6570\u503c\u7684\u51fd\u6570
function myFunction_get() {
  // \u83b7\u53d6\u6839\u7684\u6837\u5f0f\u7684\u5c5e\u6027\u548c\u503c
  var rs = getComputedStyle(r);
  // \u63d0\u9192\u7b49\u5f0f\u7684\u503c\u7684\u503c
  alert(\"\u4e3a\u4e00\u4e2a\u5b57\u7b26\u7ed9\u51fa\u503c\u7684\u6761\u4ef6\": \" + rs.getPropertyValue(\"--blue\"));
}
// Δημιουργία συνάρτησης για τη ρύθμιση της τιμής της μεταβλητής
function myFunction_set() {
  // Set the value of variable --blue to another value (in this case "lightblue")
  r.style.setProperty('--blue', 'lightblue');
}
</script>

Δοκιμάστε το προσωπικά

Υποστήριξη Browser

Τα αριθμήματα στη τάβλη αναφέρουν την πρώτη έκδοση του browser που υποστηρίζει πλήρως την ιδιότητα.

Συνάρτηση
var() 49.0 15.0 31.0 9.1 36.0

Συνάρτηση var() CSS

Συνάρτηση Περιγραφή
var() Εισάγετε την τιμή της μεταβλητής CSS.