{"id":494,"date":"2025-12-05T10:43:02","date_gmt":"2025-12-05T02:43:02","guid":{"rendered":"https:\/\/www.52runoob.com\/?p=494"},"modified":"2025-12-05T10:43:02","modified_gmt":"2025-12-05T02:43:02","slug":"html%e4%bd%bf%e7%94%a8javascript-css%e5%ae%9e%e7%8e%b0%e4%ba%ae%e8%89%b2%e5%92%8c%e6%9a%97%e8%89%b2%e5%88%87%e6%8d%a2%e5%8a%9f%e8%83%bd","status":"publish","type":"post","link":"https:\/\/www.52runoob.com\/index.php\/2025\/12\/05\/html%e4%bd%bf%e7%94%a8javascript-css%e5%ae%9e%e7%8e%b0%e4%ba%ae%e8%89%b2%e5%92%8c%e6%9a%97%e8%89%b2%e5%88%87%e6%8d%a2%e5%8a%9f%e8%83%bd\/","title":{"rendered":"html\u4f7f\u7528JavaScript\u00a0+\u00a0CSS\u5b9e\u73b0\u4eae\u8272\u548c\u6697\u8272\u5207\u6362\u529f\u80fd"},"content":{"rendered":"\n<p>\u4e0b\u9762\u7ed9\u4f60\u6574\u7406\u4e00\u4e2a <strong>\u7eaf HTML + JavaScript + CSS \u5b9e\u73b0\u4eae\u8272\uff08Light Mode\uff09\u548c\u6697\u8272\uff08Dark Mode\uff09\u5207\u6362\u529f\u80fd\u7684\u5b8c\u6574\u793a\u4f8b<\/strong>\uff0c\u5305\u542b\u6700\u4f73\u5b9e\u8df5\u3001localStorage \u4fdd\u5b58\u7528\u6237\u504f\u597d\uff0c\u4ee5\u53ca\u52a8\u753b\u8fc7\u6e21\u6548\u679c\u3002<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">1\ufe0f\u20e3 HTML \u7ed3\u6784<\/h1>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n&amp;lt;!DOCTYPE html&gt;\n&amp;lt;html lang=&quot;zh-CN&quot;&gt;\n&amp;lt;head&gt;\n  &amp;lt;meta charset=&quot;UTF-8&quot;&gt;\n  &amp;lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;\n  &amp;lt;title&gt;\u4eae\u6697\u6a21\u5f0f\u5207\u6362&amp;lt;\/title&gt;\n  &amp;lt;link rel=&quot;stylesheet&quot; href=&quot;style.css&quot;&gt;\n&amp;lt;\/head&gt;\n&amp;lt;body&gt;\n  &amp;lt;header&gt;\n    &amp;lt;h1&gt;\u4eae\u6697\u6a21\u5f0f\u5207\u6362\u793a\u4f8b&amp;lt;\/h1&gt;\n    &amp;lt;button id=&quot;toggle-theme&quot;&gt;\u5207\u6362\u6a21\u5f0f&amp;lt;\/button&gt;\n  &amp;lt;\/header&gt;\n\n  &amp;lt;main&gt;\n    &amp;lt;p&gt;\u8fd9\u662f\u4e00\u4e2a\u793a\u4f8b\u6587\u672c\uff0c\u4f53\u9a8c\u4eae\u8272\u548c\u6697\u8272\u6a21\u5f0f\u7684\u5207\u6362\u6548\u679c\u3002&amp;lt;\/p&gt;\n  &amp;lt;\/main&gt;\n\n  &amp;lt;script src=&quot;script.js&quot;&gt;&amp;lt;\/script&gt;\n&amp;lt;\/body&gt;\n&amp;lt;\/html&gt;\n\n<\/pre><\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">2\ufe0f\u20e3 CSS \u6837\u5f0f\uff08\u4eae\u8272 &amp; \u6697\u8272\uff09<\/h1>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n\/* style.css *\/\n\n\/* \u9ed8\u8ba4\u4eae\u8272\u6a21\u5f0f *\/\n:root {\n  --bg-color: #ffffff;\n  --text-color: #000000;\n  --header-bg: #f0f0f0;\n  --btn-bg: #000000;\n  --btn-color: #ffffff;\n  --transition-time: 0.3s;\n}\n\nbody {\n  background-color: var(--bg-color);\n  color: var(--text-color);\n  font-family: Arial, sans-serif;\n  transition: background-color var(--transition-time), color var(--transition-time);\n}\n\nheader {\n  background-color: var(--header-bg);\n  padding: 1rem;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  transition: background-color var(--transition-time);\n}\n\nbutton {\n  background-color: var(--btn-bg);\n  color: var(--btn-color);\n  border: none;\n  padding: 0.5rem 1rem;\n  cursor: pointer;\n  border-radius: 4px;\n  transition: background-color var(--transition-time), color var(--transition-time);\n}\n\n\/* \u6697\u8272\u6a21\u5f0f *\/\nbody.dark-mode {\n  --bg-color: #121212;\n  --text-color: #e0e0e0;\n  --header-bg: #1f1f1f;\n  --btn-bg: #e0e0e0;\n  --btn-color: #121212;\n}\n\n<\/pre><\/div>\n\n\n<p>\u2705 \u7279\u70b9\uff1a<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u4f7f\u7528 <strong>CSS \u53d8\u91cf<\/strong>\uff08<code>--bg-color<\/code>\u3001<code>--text-color<\/code> \u7b49\uff09\u8f7b\u677e\u5207\u6362\u4e3b\u9898<\/li>\n\n\n\n<li>\u4f7f\u7528 <code>transition<\/code> \u5b9e\u73b0\u5e73\u6ed1\u52a8\u753b<\/li>\n\n\n\n<li><code>body.dark-mode<\/code> \u63a7\u5236\u6697\u8272\u6a21\u5f0f<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">3\ufe0f\u20e3 JavaScript \u529f\u80fd\u5b9e\u73b0<\/h1>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n\/\/ script.js\n\nconst toggleBtn = document.getElementById(&#039;toggle-theme&#039;);\nconst body = document.body;\n\n\/\/ \u521d\u59cb\u5316\uff1a\u8bfb\u53d6 localStorage\nconst currentTheme = localStorage.getItem(&#039;theme&#039;);\nif (currentTheme === &#039;dark&#039;) {\n  body.classList.add(&#039;dark-mode&#039;);\n}\n\n\/\/ \u5207\u6362\u6a21\u5f0f\ntoggleBtn.addEventListener(&#039;click&#039;, () =&gt; {\n  body.classList.toggle(&#039;dark-mode&#039;);\n\n  \/\/ \u4fdd\u5b58\u7528\u6237\u504f\u597d\n  if (body.classList.contains(&#039;dark-mode&#039;)) {\n    localStorage.setItem(&#039;theme&#039;, &#039;dark&#039;);\n  } else {\n    localStorage.setItem(&#039;theme&#039;, &#039;light&#039;);\n  }\n});\n\n<\/pre><\/div>\n\n\n<p>\u2705 \u529f\u80fd\u70b9\uff1a<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>\u70b9\u51fb\u6309\u94ae\u5207\u6362\u4eae\u6697\u6a21\u5f0f<\/li>\n\n\n\n<li>\u4f7f\u7528 <code>classList.toggle<\/code> \u5207\u6362 <code>dark-mode<\/code><\/li>\n\n\n\n<li>\u4f7f\u7528 <strong>localStorage<\/strong> \u4fdd\u5b58\u7528\u6237\u9009\u62e9\uff0c\u4e0b\u6b21\u8bbf\u95ee\u9875\u9762\u81ea\u52a8\u52a0\u8f7d\u504f\u597d<\/li>\n\n\n\n<li>CSS \u53d8\u91cf\u548c <code>transition<\/code> \u5b9e\u73b0\u5e73\u6ed1\u5207\u6362<\/li>\n<\/ol>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">4\ufe0f\u20e3 \u53ef\u9009\u6269\u5c55\u529f\u80fd<\/h1>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u81ea\u52a8\u8ddf\u968f\u7cfb\u7edf\u4e3b\u9898<\/strong><\/li>\n<\/ol>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\nif (!localStorage.getItem(&#039;theme&#039;)) {\n  const prefersDark = window.matchMedia(&#039;(prefers-color-scheme: dark)&#039;).matches;\n  if (prefersDark) body.classList.add(&#039;dark-mode&#039;);\n}\n\n<\/pre><\/div>\n\n\n<ol start=\"2\" class=\"wp-block-list\">\n<li><strong>\u5207\u6362\u6309\u94ae\u56fe\u6807<\/strong><\/li>\n<\/ol>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n&amp;lt;button id=&quot;toggle-theme&quot;&gt;\ud83c\udf19&amp;lt;\/button&gt;\n\n<\/pre><\/div>\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\ntoggleBtn.addEventListener(&#039;click&#039;, () =&gt; {\n  body.classList.toggle(&#039;dark-mode&#039;);\n  toggleBtn.textContent = body.classList.contains(&#039;dark-mode&#039;) ? &#039;\u2600\ufe0f&#039; : &#039;\ud83c\udf19&#039;;\n});\n\n<\/pre><\/div>\n\n\n<ol start=\"3\" class=\"wp-block-list\">\n<li><strong>\u66f4\u591a\u4e3b\u9898<\/strong><\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u53ef\u4ee5\u5b9a\u4e49\u66f4\u591a CSS \u53d8\u91cf\uff0c\u5982 <code>--link-color<\/code>\u3001<code>--card-bg<\/code><\/li>\n\n\n\n<li>\u901a\u8fc7 <code>body.classList<\/code> \u5207\u6362\u4e0d\u540c\u4e3b\u9898<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">5\ufe0f\u20e3 \u6700\u7ec8\u6548\u679c<\/h1>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u521d\u59cb\u9875\u9762\u4e3a\u4eae\u8272\uff08\u767d\u5e95\u9ed1\u5b57\uff09<\/li>\n\n\n\n<li>\u70b9\u51fb\u6309\u94ae\u5e73\u6ed1\u5207\u6362\u6697\u8272\uff08\u6df1\u8272\u80cc\u666f\uff0c\u6d45\u8272\u6587\u5b57\uff09<\/li>\n\n\n\n<li>\u7528\u6237\u5237\u65b0\u9875\u9762\u540e\u4ecd\u4fdd\u6301\u9009\u62e9\u6a21\u5f0f<\/li>\n\n\n\n<li>\u53ef\u6269\u5c55\u4e3a\u591a\u79cd\u4e3b\u9898\u3001\u7cfb\u7edf\u81ea\u52a8\u5339\u914d<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>\u4e0b\u9762\u7ed9\u4f60\u6574\u7406\u4e00\u4e2a \u7eaf HTML + JavaScript + CSS \u5b9e\u73b0\u4eae\u8272\uff08&#8230; <a class=\"more-link\" href=\"https:\/\/www.52runoob.com\/index.php\/2025\/12\/05\/html%e4%bd%bf%e7%94%a8javascript-css%e5%ae%9e%e7%8e%b0%e4%ba%ae%e8%89%b2%e5%92%8c%e6%9a%97%e8%89%b2%e5%88%87%e6%8d%a2%e5%8a%9f%e8%83%bd\/\">Continue Reading &rarr;<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[49],"tags":[],"class_list":["post-494","post","type-post","status-publish","format-standard","hentry","category-javascript"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/posts\/494","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/comments?post=494"}],"version-history":[{"count":1,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/posts\/494\/revisions"}],"predecessor-version":[{"id":495,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/posts\/494\/revisions\/495"}],"wp:attachment":[{"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/media?parent=494"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/categories?post=494"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/tags?post=494"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}