\u5229\u7528\u6839\u76ee\u9304\u9078\u53d6\u5668\uff0c\u81ea\u5b9a\u7fa9CSS\u5c6c\u6027\uff0c\u4e26\u5957\u7528\u65bc\u5143\u7d20\u3002
\u81ea\u5b9a\u7fa9\u5c6c\u6027 Custom properties (sometimes referred to as CSS variables or cascading variables)<\/p>\n\n\n\n
\u4f7f\u7528\u4ee5\u96d9\u9023\u5b57\u7b26\uff08–\uff09\u958b\u982d\u7684\u81ea\u5b9a\u7fa9\u5c6c\u6027\u540d\u7a31\uff0c\u53ef\u4ee5\u4f7f\u7528CSS\u5c6c\u6027\u4f86\u81ea\u5b9a\u7fa9\u5c6c\u6027\u3002
PS.\u81ea\u5b9a\u7fa9\u540d\u7a31\u53ef\u4f9d\u5927\u5c0f\u5beb\u5340\u5206\uff0c\u4f8b\uff1a–my-color\u8207–My-color\u5169\u8005\u53ef\u55ae\u7368\u5b9a\u7fa9\u3002<\/p>\n\n\n\n
:root {
–\u81ea\u5b9a\u7fa9\u540d\u7a31: \u5c6c\u6027\u503c; \/* \u81ea\u5b9a\u7fa9\u5c6c\u6027\u8b8a\u6578 *\/
}
element {
\u5c6c\u6027: var(–\u81ea\u5b9a\u7fa9\u540d\u7a31); \/* \u5957\u7528\u5c6c\u6027\u8b8a\u6578 *\/
}<\/p>\n\n\n\n
\/* css\u7bc4\u4f8b-\u57fa\u672c\u4f7f\u7528*\/\n\n\/*\u81ea\u5b9a\u7fa9\u5168\u57df\u8b8a\u6578\u5c6c\u6027 *\/\n:root {\n --maincolor: black; \n --secondarycolor: red;\n background: #ff0000; \/* \u81ea\u5b9a\u7fa9\u5c6c\u6027\uff0c\u5957\u7528<html>\u80cc\u666f *\/\n}\n\/* \u5957\u7528\u5c6c\u6027\u8b8a\u6578 *\/\nbody {\n background: var(--maincolor);\n color: white;\n}\nbody p {\n background: var(--secondarycolor);\n}\na { \n color: var(--maincolor); \n text-decoration-color: var(--secondarycolor); \n}<\/pre>\n\n\n\n\/* css\u7bc4\u4f8b-\u91cd\u8907\u5143\u7d20\u5957\u7528\u7bc4\u4f8b*\/\n\n\/*\u81ea\u5b9a\u7fa9\u5168\u57df\u8b8a\u6578\u5c6c\u6027 *\/\n:root {\n --main-bg-color: brown; \n}\n\n\/* \u5957\u7528\u5c6c\u6027\u8b8a\u6578 *\/\n.one {\n background-color: var(--main-bg-color);\n}\n.two {\n background-color: black; \n}\n.three {\n background-color: var(--main-bg-color);\n}<\/pre>\n\n\n\n\u900f\u904eCSS\u6a19\u7c64\u5b9a\u7fa9\u5143\u7d20\u5c6c\u6027<\/h4>\n\n\n\n
element (\u7236\u5143\u7d20) {
–\u81ea\u5b9a\u7fa9\u540d\u7a31: \u5c6c\u6027\u503c; \/* \u81ea\u5b9a\u7fa9\u5c6c\u6027\u8b8a\u6578 *\/
}
element (\u5b50\u5143\u7d20){
\u5c6c\u6027: var(–\u81ea\u5b9a\u7fa9\u540d\u7a31); \/* \u5957\u7528\u5c6c\u6027\u8b8a\u6578 *\/
}<\/p>\n\n\n\n
\/* css\u7bc4\u4f8b-\u5143\u7d20\u4f7f\u7528*\/\n\nroot {\n --darkborder: 5px solid black;\n}\nbody {\n --darkborder: 1px solid darkred;\n}\nimg{\n border: var(--darkborder); \/* img border will be 1px solid darkred *\/\n}<\/pre>\n\n\n\n\/* css\u7bc4\u4f8b-\u5957\u7528\u5143\u7d20\uff0c\u5b50\u5143\u7d20\u4e5f\u6703\u7e7c\u627f*\/\n\n:root {\n --myborder: 2px solid black;\n}\nul {\n margin: 0;\n border-left: var(--myborder);\n}\nul ul {\n margin-left: 30px;\n}<\/pre>\n\n\n\n\/* html\u7bc4\u4f8b-\u5c6c\u6027\u503c\u4f7f\u7528\u65bchtml*\/\n\n<!--HTML-->\n<html style=\"--size: 600px\">\n\nbody {\n max-width: var(--size)\n}<\/pre>\n\n\n\n\/* css\u7bc4\u4f8b-\u5728\u81ea\u5b9a\u7fa9\u5c6c\u6027\u4e2d\uff0c\u4f7f\u7528\u81ea\u5b9a\u7fa9\u5c6c\u6027*\/\n\n--base-red-color: #f00;\n--background-gradient: linear-gradient(to top, var(--base-red-color), #222);\n<\/pre>\n\n\n\n\/* css\u7bc4\u4f8b-\u4f7f\u7528\u5728@media screen(\u4e0d\u540c\u88dd\u7f6e\u5c3a\u5bf8) *\/\n:root {\n\t--padding: 15px \n}\n\n@media screen and (min-width: 750px) {\n\t--padding: 30px\n}<\/pre>\n<\/div>\n<\/div>\n\n\n\n\n\n\u261e \u57fa\u672c\u4f7f\u7528\u7bc4\u4f8b<\/h3>\n\n\n\n\u7e7c\u627f\u904b\u7528<\/h4>\n\n\n\n
\u4e0d\u540c\u5143\u7d20\u81ea\u5b9a\u7fa9\u540c\u500b\u5c6c\u6027\u540d\u7a31\uff0c\u8a2d\u5b9a\u4e0d\u540c\u5c6c\u6027\u503c\uff0c\u6839\u64da\u6709\u7121\u5b9a\u7fa9\u503c\u800c\u5448\u73fe\u4e0d\u540c\u6548\u679c<\/p>\n\n\n\n
\/* css\u7bc4\u4f8b-\u7e7c\u627f\u904b\u7528*\/\n\n\/* \u81ea\u5b9a\u7fa9\u5c6c\u6027\u8b8a\u6578 *\/\n:root { --bg-color: #eeeeee;} \nh3 { --bg-color: #d826c1;}\n#text-1 { --bg-color: #94a437;}\n.text-2 { --bg-color: #d9444a;}\n\n\/* \u5c07--bg-color\u5957\u7528\u81f3\u6240\u6709\u5143\u7d20 *\/\n* {\n background: var(--bg-color); \n}<\/pre>\n\n\n\n<!--html\u7bc4\u4f8b-\u7e7c\u627f\u904b\u7528-->\n\n<section><!-- section\u7121\u81ea\u5b9a\u7fa9\uff0c\u7e7c\u627f root \u7684\u8a2d\u5b9a-->\n <p>\u7121\u81ea\u5b9a\u7fa9\uff0c\u7e7c\u627f root \u7684\u8a2d\u5b9a<\/p>\n <h3>\u7e7c\u627f h3 \u7684\u8a2d\u5b9a<\/h3>\n <div id=\"text-1\">\u7e7c\u627f #text-1 \u7684\u8a2d\u5b9a<\/div>\n <div class=\"text-2\">\u7e7c\u627f .text-2 \u7684\u8a2d\u5b9a<\/div>\n<\/section><\/pre>\n\n\n\nfallback \u904b\u7528<\/h4>\n\n\n\n
element : var(–\u81ea\u5b9a\u7fa9\u5c6c\u6027\u540d\u7a31, fallback\u5c6c\u6027\u503c\uff0c\u4f8b\uff1ablue);<\/p>\n\n\n\n
\/* css\u7bc4\u4f8b-fallback \u904b\u7528*\/\n\n#main {\n --bg-color: red;\n}\n\n#main .header {\n background: var(--header-color, blue);\n \/* \u6c92\u6709 --header-color\uff0c\u986f\u793a fallback color: \u85cd\u8272 *\/\n}\n\n#main .text {\n background: var(--bg-color, black);\n \/* \u6709 --bg-color\uff0c\u986f\u793a\u7d05\u8272 *\/\n}<\/pre>\n\n\n\n\/* css\u7bc4\u4f8b-fallback \u7e7c\u627f\u7bc4\u4f8b*\/\n\ntemplate-default {\n --bg-color: #d9444a;\n}\n\np {\n background: var(--bg-color, #369);\n}<\/pre>\n\n\n\n<!--html\u7bc4\u4f8b-fallback \u7e7c\u627f\u7bc4\u4f8b-->\n\n<template-default>\n\u7e7c\u627f template-default \u7684 --bg-color \n<\/template-default>\n\n<p>\u4e0d\u5728 tempalte-default\u5167\uff0c\u7121 --bg-color \uff0c\u986f\u793a fallback #369<\/p><\/pre>\n<\/div>\n<\/div>\n\n\n\n\n\n\u261e \u4f7f\u7528 JavaScript \u5b9a\u7fa9\u5c6c\u6027\u7684\u503c<\/h3>\n\n\n\n
\u8b80\u53d6\uff1agetPropertyValue()
\u5beb\u5165\uff1asetProperty()<\/p>\n\n\n\n
var styles = getComputedStyle(document.documentElement);\nvar value = String(styles.getPropertyValue('--bg-primary-color')).trim();\n\n\/* \u8b80\u53d6\u80cc\u666f\u984f\u8272 *\/\ndocument.getElementById(\"color-name\").innerHTML=value;\n\n\/* \u4fee\u6539\u80cc\u666f\u984f\u8272 *\/\ndocument.documentElement.style.setProperty('--bg-primary-color', '#369');<\/pre>\n\n\n\n\/\/ get variable from inline style\nelement.style.getPropertyValue(\"--my-var\");\n\n\/\/ get variable from wherever\ngetComputedStyle(element).getPropertyValue(\"--my-var\");\n\n\/\/ set variable on inline style\nelement.style.setProperty(\"--my-var\", jsVar + 4);<\/pre>\n\n\n\n\u6539\u8b8a\u80cc\u666f\u7bc4\u4f8b<\/h4>\n\n\n\n\/*css\u7bc4\u4f8b-\u6539\u8b8a\u80cc\u666f*\/\nbody {\n background-color: var(--bg, #b3e5fc);\n color: var(--bg-text, #37474f);\n font-family: sans-serif;\n line-height: 1.3;\n}\n\n.toolbar {\n text-align: center;\n}<\/pre>\n\n\n\n<!--html\u7bc4\u4f8b-\u6539\u8b8a\u80cc\u666f-->\n<div class=\"toolbar\">\n <button value=\"dark\">dark<\/button>\n <button value=\"calm\">calm<\/button>\n <button value=\"light\">light<\/button>\n<\/div>\n\n<h2>Stackoverflow Question<\/h2>\nI would like to use an external javascript file in another javascript file. For example, I could store all my global variables\nin a globals.js file and then call then from the website logic logic.js. Then in the index.html, i would insert the tag.\nHow do I use the globals.js inside the logic.js?\n\n<h2>Stackoverflow Answer<\/h2>\nJavascript doesn't have any implicit \"include this other file\" mechanisms, like css's @include. You just have to list your\nglobals file before the logic file in the tags:\n\n<pre>\n<code>\nscript type=\"text\/javascript\" src=\"globals.js\"\n<\/code>\n<\/pre>\nIf guaranteeing that the globals are available before anything in the logic file fires up, you can do a slow polling loop\nto see if some particular variable is available before calling an init() or whatever function.<\/pre>\n\n\n\n\/\/js\u7bc4\u4f8b-\u6539\u8b8a\u80cc\u666f\nconst root = document.documentElement;\nconst themeBtns = document.querySelectorAll(\".toolbar > button\");\n\nthemeBtns.forEach(btn => {\n btn.addEventListener(\"click\", handleThemeUpdate);\n});\n\nfunction handleThemeUpdate(e) {\n switch (e.target.value) {\n case \"dark\":\n root.style.setProperty(\"--bg\", \"black\");\n root.style.setProperty(\"--bg-text\", \"white\");\n break;\n case \"calm\":\n root.style.setProperty(\"--bg\", \"#B3E5FC\");\n root.style.setProperty(\"--bg-text\", \"#37474F\");\n break;\n case \"light\":\n root.style.setProperty(\"--bg\", \"white\");\n root.style.setProperty(\"--bg-text\", \"black\");\n break;\n }\n}<\/pre>\n<\/div>\n<\/div>\n\n\n\n<\/p>\n","protected":false},"excerpt":{"rendered":"
:root \u5229\u7528\u6839\u76ee\u9304\u9078\u53d6\u5668\uff0c\u81ea\u5b9a\u7fa9CSS\u5c6c\u6027\uff0c\u4e26\u5957\u7528\u65bc\u5143\u7d20\u3002\u81ea\u5b9a\u7fa9\u5c6c\u6027 Custom properties ...<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[13,12,4],"tags":[],"class_list":["post-2390","post","type-post","status-publish","format-standard","hentry","category-css","category-front-end","category-notes"],"_links":{"self":[{"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/posts\/2390","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/comments?post=2390"}],"version-history":[{"count":146,"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/posts\/2390\/revisions"}],"predecessor-version":[{"id":6830,"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/posts\/2390\/revisions\/6830"}],"wp:attachment":[{"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/media?parent=2390"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/categories?post=2390"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/tags?post=2390"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}