{"id":35,"date":"2023-10-21T05:21:55","date_gmt":"2023-10-20T21:21:55","guid":{"rendered":"http:\/\/82.157.238.203\/?p=35"},"modified":"2024-01-15T20:00:10","modified_gmt":"2024-01-15T12:00:10","slug":"autoold","status":"publish","type":"post","link":"http:\/\/hxlsakrua.top\/?p=35","title":{"rendered":"\u9002\u8001\u5316\u6280\u672f"},"content":{"rendered":"\n

\u7b80\u4ecb<\/strong><\/h2>\n\n\n\n

\u5229\u7528css\u53d8\u91cf\u5b9e\u73b0\u6309\u94ae\u70b9\u51fb\u6392\u7248\u6837\u5f0f\u8f6c\u6362\u6210\u8001\u5e74\u4eba\u770b\u5f97\u89c1\u7684\u6837\u5f0f\u3002<\/p>\n\n\n\n

\u9002\u7528\u8303\u56f4<\/strong><\/h2>\n\n\n\n

\u7528\u4e8e\u624b\u673ah5\u9875\u9762\uff0c\u76ee\u524d\u9a8c\u8bc1\u7684\u4e3b\u6d41\u6d4f\u89c8\u5668\uff08Google\uff0cedge\uff09\u90fd\u53ef\u4ee5\u9002\u914d<\/p>\n\n\n\n

\u53d7\u4f17\u5bf9\u8c61<\/strong><\/h2>\n\n\n\n

\u8001\u5e74\u4eba\u548c\u4e00\u4e9b\u5f31\u89c6\u7684\u4eba<\/p>\n\n\n\n

\u9700\u8981\u6587\u4ef6<\/strong><\/h2>\n\n\n\n

less\u540e\u7f00\u7684css\u6837\u5f0f\u6587\u4ef6\uff0c\u542b\u6709dom\u8282\u70b9\u7684\u5c55\u793a\u6587\u4ef6<\/p>\n\n\n\n

\u6700\u7ec8\u6548\u679c<\/strong><\/h2>\n\n\n\n

\"\"\u56fe1<\/p>\n\n\n\n

\u5173\u952e\u4ee3\u7801<\/strong><\/h2>\n\n\n\n

\"\"\u56fe2<\/p>\n\n\n\n

    \n
  • \u914d\u7f6ecss\u5168\u5c40\u53d8\u91cf<\/li>\n<\/ul>\n\n\n\n
    \/* \u5b9a\u4e49\u9002\u8001\u5316\u6837\u5f0f\u7684CSS\u53d8\u91cf *\/\n:root {\n  --font-size: 12px;\n  --background-color: #FEDFE1;\n  --text-color: #000000;\n  --button-padding: 10px 20px;\n  --button-border: 2px solid #000000;\n  --button-background: #ffffff;\n  --button-hover-background: #eeeeee;\n}<\/code><\/pre>\n\n\n\n
      \n
    • \u6837\u5f0f\u90e8\u5206\u5229\u7528css\u53d8\u91cf<\/li>\n<\/ul>\n\n\n\n
      \/* \u4f7f\u7528CSS\u53d8\u91cf\u6765\u8bbe\u7f6e\u6837\u5f0f *\/\n.box {\n  font-size: var(--font-size);\n  background-color: var(--background-color);\n  color: var(--text-color);\n}\n\nbutton {\n  padding: var(--button-padding);\n  border: var(--button-border);\n  background-color: var(--button-background);\n}\n\nbutton:hover, button:focus {\n  background-color: var(--button-hover-background);\n  outline: none;\n}<\/code><\/pre>\n\n\n\n
        \n
      • dom\u5229\u7528css<\/li>\n<\/ul>\n\n\n\n
        <div className={styles[\"box\"]}>\n      <h1>\u9002\u8001\u5316\u9875\u9762\u793a\u4f8b<\/h1>\n\n      <button onClick={change}>\u70b9\u51fb\u6211\u8fdb\u884c\u9002\u8001\u5316<\/button>\n\n      <p>\u8fd9\u662f\u4e00\u4e2a\u9002\u5408\u8001\u5e74\u4eba\u7684H5\u9875\u9762\u793a\u4f8b\u3002<\/p>\n      <Content \/>\n<\/div><\/code><\/pre>\n\n\n\n
          \n
        • \u89e6\u53d1\u4e8b\u4ef6 <\/code><\/li>\n<\/ul>\n\n\n\n
            const [isOld, setIsOld] = useState(true);\n  const change = () => {\n    let autoOld = document.documentElement.style;\n    if (isOld) {\n      autoOld.setProperty(`--font-size`, \"20px\");\n      autoOld.setProperty(`--background-color`, \"#fffff\");\n      autoOld.setProperty(`--text-color`, \"#000000\");\n      autoOld.setProperty(`--button-padding`, \"10px 20px\");\n      autoOld.setProperty(`--button-border`, \"#ffffff\");\n      autoOld.setProperty(`--button-hover-background`, \"#eeeeee\");\n    } else {\n      autoOld.setProperty(`--font-size`, \"12px\");\n      autoOld.setProperty(`--background-color`, \"#FEDFE1\");\n    }\n    setIsOld(!isOld);\n  };<\/code><\/pre>\n\n\n\n
          \u5e38\u89c1\u95ee\u9898\u89e3\u7b54<\/strong><\/h2>\n\n\n\n
          \u200b<\/p>\n","protected":false},"excerpt":{"rendered":"
          \u7b80\u4ecb \u5229\u7528css\u53d8\u91cf\u5b9e\u73b0\u6309\u94ae\u70b9\u51fb\u6392\u7248\u6837\u5f0f\u8f6c\u6362\u6210\u8001\u5e74\u4eba\u770b\u5f97\u89c1\u7684\u6837\u5f0f\u3002 \u9002\u7528\u8303\u56f4 \u7528\u4e8e\u624b\u673ah5\u9875\u9762\uff0c\u76ee\u524d\u9a8c\u8bc1\u7684\u4e3b\u6d41\u6d4f\u89c8\u5668\uff08Google …<\/p>","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[6,5],"class_list":["post-35","post","type-post","status-publish","format-standard","hentry","category-7","tag-css","tag-5"],"_links":{"self":[{"href":"http:\/\/hxlsakrua.top\/index.php?rest_route=\/wp\/v2\/posts\/35","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/hxlsakrua.top\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/hxlsakrua.top\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/hxlsakrua.top\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/hxlsakrua.top\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=35"}],"version-history":[{"count":4,"href":"http:\/\/hxlsakrua.top\/index.php?rest_route=\/wp\/v2\/posts\/35\/revisions"}],"predecessor-version":[{"id":76,"href":"http:\/\/hxlsakrua.top\/index.php?rest_route=\/wp\/v2\/posts\/35\/revisions\/76"}],"wp:attachment":[{"href":"http:\/\/hxlsakrua.top\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=35"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/hxlsakrua.top\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=35"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/hxlsakrua.top\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=35"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}