决不！决不！你不知道原生CSS中可以使用变量吗~
时间：2023-03-31 11:28:31
CSS
澶у濂斤紝鎴戞槸杈硅姳鑺别煂革紝鎯宠繘澶у巶鐨勫ぇ涓夊鐢燂紝涓轰簡鎷ユ湁瀹屾暣鐨勫墠绔煡璇嗙郴缁燂紝鐜板湪鎴戣浠庡ご寮€濮嬪涔狅紝鏁寸悊锛屾€荤粨銆傚啓浣滀笉鏄撹浆杞斤紝鍐欏湪鍓嶉潰璇峰厛寰佸緱鍚屾剰鍦–SS涓娇鐢ㄥ彉閲忓苟涓嶅皯瑙併€傛棭鍦?007骞碨ass璇炵敓鏃讹紝鍙橀噺灏卞彲浠ラ€氳繃棰勫鐞嗘潵澶勭悊锛孡ess鍜孲tylus棰勫鐞嗗櫒鐩哥户鍑虹幇銆?鍙橀噺锛堜篃绉颁负鑷畾涔夊睘鎬э級鐨勬蹇电洿鍒癈SS3寮曞叆鍚庢墠鍑虹幇鍦ㄥ師鐢烠SS涓紝鐜板湪鎴戜滑灏辨潵浜嗚В涓€涓嬨€傚熀鏈敤娉曟湰鏈篊SS瀹氫箟鍙橀噺銆傚彉閲忓悕闇€瑕佷互涓や釜鍑忓彿寮€澶粹€斺€斿畠鐨勫€煎彲浠ユ槸浠讳綍鏈夋晥鐨凜SS鍊笺€傚畾涔塁SS姣斾緥鐨勫啓娉曚笌鏅€欳SS灞炴€х殑鍐欐硶涓€鑷淬€傝娉曡鍒欏涓嬶細element{--main-text-color:#333333;}鍏朵腑--main-text-color浠ｈ〃鍙橀噺鍚嶏紝#333333浠ｈ〃鍙橀噺鍊笺€備负浠€涔堝師鐢烠SS瑕佺敤涓や釜鍑忓彿鈥斺€斾竴寮€濮嬫垜鐚滄槸鍥犱负@琚獿ess鍗犵敤锛?琚玈ass鍗犵敤锛岃杩€夋嫨鈥斺€斻€傛湰鏈篊SS鍙橀噺鍙桯TML灞傛缁撴瀯鐨勭害鏉燂紝骞朵粠鍏剁埗绾х户鎵垮€笺€傛墍浠ユ渶濂界殑鍋氭硶鏄湪鏍逛吉绫讳笂瀹氫箟瀹冿細鏍归€夋嫨鍣ㄣ€傜ず渚嬩唬鐮佸涓嬶細:root{--main-text-color:#FF6A00;}閭ｄ箞鎴戜滑鐨凥TML缁撴瀯濡備笅锛?h1class="text">褰煎哺鏃?/h1>鐜板湪鎴戜滑鏈変簡瀹氫箟鍙橀噺鍜孒TML缁撴瀯锛屽湪CSS涓娇鐢ㄥ彉閲忎娇鐢╲ar()鍑芥暟锛屽疄鐜板涓嬶細.text{color:var(--main-text-color);}鏈€缁堝疄鐜版晥鏋滃涓嬶細鍊煎緱娉ㄦ剰鐨勬槸锛岃嚜瀹氫箟灞炴€х殑澶у皬鍐欐槸鏁忔劅鐨勶紝鍗?-my-color鍜?-My-color灏嗚瑙嗕负涓や釜鍙橀噺銆傚鏁板€肩殑鐢ㄦ硶褰撴垜浠渶瑕佷娇鐢ㄥ嚱鏁颁綔涓哄€兼椂锛屼緥濡備笅闈㈢殑浠ｇ爜background-image:url(./image/avatar.png);浣跨敤鍙橀噺瀹氫箟鏃讹紝涓嶈兘鍙畾涔?/image/avatar.png锛岃€屾槸灏嗘暣涓€间綔涓轰竴涓彉閲忥紝瀹氫箟濡備笅锛?-avatar:url('./image/avatar.png');background-image:缃戝潃(./image/avatar.png);variableInheritance鍘熺敓CSS鍙橀噺鏄瓨鍦ㄧ户鎵挎€х殑锛屼篃灏辨槸璇存垜浠湪鏌愪釜鐖跺眰娣诲姞涓€涓彉閲忥紝鍦ㄥ瓙灞傜殑浠讳綍鍦版柟閮藉彲浠ヨ闂繖涓彉閲忋€侶TML缁撴瀯濡備笅锛?divclass="parent">褰煎哺鏃?/div>
CSS浠ｇ爜濡備笅锛?parent{--color:#FF6A00锛?-瀛椾綋澶у皬锛?4px锛?-font-weight:600;}.child{棰滆壊:var(--color);瀛椾綋澶у皬锛歷ar锛?-瀛椾綋澶у皬锛夛紱瀛椾綋绮楃粏锛歷ar(--瀛椾綋绮楃粏)锛沵argin:32px;}鎴戜滑鍦?parent涓畾涔夌殑鍙橀噺鍙互鍦╟hild鐨勪换浣曞湴鏂逛娇鐢ㄣ€傛渶缁堟晥鏋滃涓嬶細鍙橀噺鐨勬浛浠ｅ€糃SS鐨剉ar()鍑芥暟鍙互鎺ュ彈涓や釜鍙傛暟锛岀涓€涓綔涓哄畠鐨勫€硷紝绗簩涓弬鏁颁綔涓哄畠鐨勬浛浠ｅ€硷紝褰撶涓€涓€煎け璐ユ椂浣跨敤銆傝繖涓嚱鏁板彧鑳芥帴鍙椾袱涓弬鏁帮紝绗竴涓弬鏁版槸鍙橀噺鍚嶏紝绗簩涓弬鏁版槸鏇夸唬鍊硷紝浣嗘槸濡傛灉鏈変袱涓互涓婄殑鍙傛暟锛岀涓€涓€楀彿鍜屽悗闈㈢殑鍙傛暟灏嗕綔涓轰竴涓弬鏁颁娇鐢ㄣ€傜浜屼釜鍙傛暟鍙互宓屽锛岀ず渚嬩唬鐮佸涓嬶細.first{/*褰撳墠鏂囨湰鐨勯鑹蹭负绾㈣壊锛屽洜涓?-color涓嶅湪褰撳墠鍏冪礌涓紝涔熶笉鍦ㄥ綋鍓嶇埗鍏冪礌涓?/棰滆壊锛歷ar(--color,red);/*褰撳墠鏂囧瓧棰滆壊涓?-main-text-color锛屽鏋?-main-text-color涓嶅瓨鍦紝鍒欐枃瀛楅鑹蹭负绾㈣壊*/color:var(--color,var(--main-text-绾㈣壊锛夛級;/*褰撳墠鏂囧瓧棰滆壊涓虹孩銆佺櫧锛屾墍浠ar()鍙兘浣跨敤涓や釜鍙傛暟*/color:var(--color,red,white);}HTML浠ｇ爜濡備笅锛?h1class="first">褰煎哺鐨勭箒鑽?/h1>閫氳繃JS鑾峰彇鍜岃缃瓹SS鍙橀噺閫氳繃JavaScript鑾峰彇鍜岃缃甁avaScript鍙橀噺鐨勫叿浣撴楠ゅ涓嬶紝鑾峰彇鎸囧畾DOM鑺傜偣锛岄€氳繃getComputedStyle()鏂规硶鑾峰彇褰撳墠DOM鑺傜偣CSSStyleDeclaration瀵硅薄閫氳繃CSSStyleDeclaration.getPropertyValue锛堝彉閲忓悕/灞炴€у悕锛夎幏鍙栨寚瀹氬彉閲忓€硷紝閫氳繃Element.style.setProperty()淇敼鎴栬缃彉閲忓€笺€傚疄鐜颁唬鐮佸涓嬶細//1constchild=document.getElementById('child')//23letcolor=getComputedStyle(child).getPropertyValue('--color')console.log(color)//#FF6A00//4child.style.setProperty('--color','#eeeccc')color=getComputedStyle(child).getPropertyValue('--color')console.log(color)//#eeeccc鎬荤粨涓€涓婥SS鍘熺敓鏀寔鍙橀噺鍙互甯姪鎴戜滑瑙ｅ喅涓€浜涢棶棰樸€傛渶閲嶈鐨勬槸锛屾湁浜汣SS鍊煎緱閲嶇敤锛屾瘮濡俢olorsometypeof銆傝繕鏈変竴浜汱ess鎴栬€匔ass瑙ｅ喅涓嶄簡鐨勯棶棰樸€傛瘮濡傛垜浠殑瀛椾綋棰滆壊鏄粠鏈嶅姟鍣ㄨ幏鍙栫殑锛岄渶瑕侀€氳繃CSS涓哄叾璁剧疆瀛椾綋棰滆壊銆傝繖绉嶆儏鍐典笅锛屽熀鏈笉鍙兘鐢↙ess鎴栬€匰ass鏉ヨВ鍐筹紝浣嗘槸鏈変簡杩欎釜涓滆タ灏卞彲浠ュ緢濂界殑甯姪鎴戜滑瑙ｅ喅杩欎簺闂銆備娇鐢↙ess鎴朣ass鎺屾彙鍘熺敓CSS鍙橀噺锛屽彲浠ュ疄鐜颁竴浜涗互鍓嶅湪寮€鍙戜腑鍋氫笉鍒扮殑鏁堟灉銆傜簿褰╂枃绔犮€愪粠闆跺紑濮嬪鍓嶇銆?4-鐞嗚ВJavaScript涓殑鍩烘湰鏁版嵁绫诲瀷銆愪粠闆跺紑濮嬪鍓嶇銆?3-杩欐鎴戠悊瑙ｄ簡JavaScript涓殑鍙橀噺銆愪粠闆跺紑濮嬪鍓嶇銆?2-JavaScript璇嶆硶缁撴瀯銆愪粠闆跺鍓嶇銆?1-浠€涔堟槸JavaScript
