如何在JavaScript中渲染CSS样式？

huangapple
go评论116阅读模式
英文:

How to render CSS styling in JavaScript?

问题

I am working on a YouTube website redesign as a hobby, and I was working on a light/dark mode system. I got the variable changing system to work, but I don't know how to render the changes I made.

Here's my HTML file (only the body part, click here for full view):

  1. <div class="header">
  2.   <a href="https://codepen.io/ReallyBadDeveloper/pen/mdzKqZY">
  3.   <img src="https://www.youtube.com/s/desktop/c1d331ff/img/favicon_48x48.png">
  4.   </a>
  5.   <button class="lightdark" onclick="darkLight">
  6.     <svg viewBox="0 0 512 512" width="20" title="adjust" onclick="darkLight()">
  7.       <path d="M8 256c0 136.966 111.033 248 248 248s248-111.034 248-248S392.966 8 256 8 8 119.033 8 256zm248 184V72c101.705 0 184 82.311 184 184 0 101.705-82.311 184-184 184z" />
  8.     </svg>
  9.     <p>Adjust colors</p>
  10.   </button>
  11. </div>
  12. <div class="body">
  13.   <p>cool</p>
  14. </div>

JavaScript code:

  1. var r = document.querySelector(':root');
  2. var isdark = 0;
  4. function darkLight() {
  5.   if (isdark == 0) {
  6.     r.style.setProperty('--backgroundcolor', '#1a1a1a');
  7.     r.style.setProperty('--bodycolor', '#3b3b3b')
  8.     r.style.setProperty('--fontcolor', 'white')
  9.     isdark = 1;
  10.   } else if (isdark == 1) {
  11.     r.style.setProperty('--backgroundcolor', '#d4d4d4')
  12.     r.style.setProperty('--bodycolor', '#f2f2f2')
  13.     r.style.setProperty('--fontcolor', 'black')
  14.     isdark = 0;
  15.   }
  16. }

CSS code:

  1. @import url('https://fonts.googleapis.com/css2?family=Lexend&amp;family=Nunito&amp;display=swap');
  2. :root {
  3.   --maincolor: #ed1818;
  4.   --backgroundcolor: #d4d4d4;
  5.   --bodycolor: #f2f2f2;
  6.   --fontcolor: black;
  7. }
  8. body {
  9.   background-color: var(--backgroundcolor);
  10.   font-family: Nunito, sans-serif;
  11.   color: var(--fontcolor);
  12.   padding: 20px;
  13. }
  14. .body {
  15.   background-color: var(--bodycolor);
  16.   border-radius: 5px;
  17.   padding: 10px 30px;
  18. }
  19. .header {
  20.   padding: 20px 0px;
  21. }
  22. button {
  23.   border: 0px solid black;
  24.   border-radius: 5px;
  25.   background-color: var(--backgroundcolor);
  26.   font-famliy: Nunito, sans-serif;
  27.   color: var(--fontcolor);
  28.   padding: 10px;
  29.   transition-duration: 0.2s;
  30. }
  31. button:hover {
  32.   border: 0px solid black;
  33.   border-radius: 5px;
  34.   background-color: var(--bodycolor);
  35.   font-famliy: Nunito, sans-serif;
  36.   color: var(--fontcolor);
  37.   cursor: pointer;
  38. }
  39. .header {
  40.   /* empty for now? */
  41. }

Can somebody help?

英文:

I am working on a YouTube website redesign as a hobby, and I was working on a light/dark mode system. I got the variable changing system to work, but I don't know how to render the changes I made.
Here's my HTML file (only the body part, click here for full view):

  1. &lt;div class=&quot;header&quot;&gt;
  2.   &lt;a href=&quot;https://codepen.io/ReallyBadDeveloper/pen/mdzKqZY&quot;&gt;
  3.   &lt;img src=&quot;https://www.youtube.com/s/desktop/c1d331ff/img/favicon_48x48.png&quot;&gt;
  4.   &lt;/a&gt;
  5.   &lt;button class=&quot;lightdark&quot; onclick=&quot;darkLight&quot;&gt;
  6.     &lt;svg viewBox=&quot;0 0 512 512&quot; width=&quot;20&quot; title=&quot;adjust&quot; onclick=&quot;darkLight()&quot;&gt;
  7.   &lt;path d=&quot;M8 256c0 136.966 111.033 248 248 248s248-111.034 248-248S392.966 8 256 8 8 119.033 8 256zm248 184V72c101.705 0 184 82.311 184 184 0 101.705-82.311 184-184 184z&quot; /&gt;
  8. &lt;/svg&gt;
  9.     &lt;p&gt;Adjust colors&lt;/p&gt;
  10.   &lt;/button&gt;
  11. &lt;/div&gt;
  12. &lt;div class=&quot;body&quot;&gt;
  13.   &lt;p&gt;cool&lt;/p&gt;
  14. &lt;/div&gt;

JavaScript code:

  1. var r = document.querySelector(&#39;:root&#39;);
  2. var isdark = 0;
  4. function darkLight() {
  5.   if (isdark == 0) {
  6.     r.style.setProperty(&#39;--backgroundcolor&#39;, &#39;#1a1a1a&#39;);
  7.     r.style.setProperty(&#39;--bodycolor&#39;, &#39;#3b3b3b&#39;)
  8.     r.style.setProperty(&#39;--fontcolor&#39;, &#39;white&#39;)
  9.     isdark = 1;
  10.   } else if (isdark == 1) {
  11.     r.style.setProperty(&#39;--backgroundcolor&#39;, &#39;#d4d4d4&#39;)
  12.     r.style.setProperty(&#39;--bodycolor&#39;, &#39;#f2f2f2&#39;)
  13.     r.style.setProperty(&#39;--fontcolor&#39;, &#39;black&#39;)
  14.     isdark = 0;
  15.   }
  16. }

CSS code:

  1. @import url(&#39;https://fonts.googleapis.com/css2?family=Lexend&amp;family=Nunito&amp;display=swap&#39;);
  2. :root {
  3.   --maincolor: #ed1818;
  4.   --backgroundcolor: #d4d4d4;
  5.   --bodycolor: #f2f2f2;
  6.   --fontcolor: black;
  7. }
  8. body {
  9.   background-color: var(--backgroundcolor);
  10.   font-family: Nunito, sans-serif;
  11.   color: var(--fontcolor);
  12.   padding: 20px;
  13. }
  14. .body {
  15.   background-color: var(--bodycolor);
  16.   border-radius: 5px;
  17.   padding: 10px 30px;
  18. }
  19. .header {
  20.   padding: 20px 0px;
  21. }
  22. button {
  23.   border: 0px solid black;
  24.   border-radius: 5px;
  25.   background-color: var(--backgroundcolor);
  26.   font-famliy: Nunito, sans-serif;
  27.   color: var(--fontcolor);
  28.   padding: 10px;
  29.   transition-duration: 0.2s;
  30. }
  31. button:hover {
  32.   border: 0px solid black;
  33.   border-radius: 5px;
  34.   background-color: var(--bodycolor);
  35.   font-famliy: Nunito, sans-serif;
  36.   color: var(--fontcolor);
  37.   cursor: pointer;
  38. }
  39. .header {
  40.   /* empty for now? */
  41. }

Can somebody help?

答案1

得分: 1

这段代码的问题在于if和else if块中的条件语句。

应将赋值运算符（=）更改为比较运算符（==或===）来检查isdark的值。

请将 = 运算符更改为 == 或 === 以正确比较 isdark 的值：

  1. var r = document.querySelector(':root');
  2. var isdark = 0;
  4. function darkLight() {
  5.   if (isdark == 0) {
  6.     r.style.setProperty('--backgroundcolor', '#1a1a1a');
  7.     r.style.setProperty('--bodycolor', '#3b3b3b');
  8.     r.style.setProperty('--fontcolor', 'white');
  9.     isdark = 1;
  10.   } else if (isdark == 1) {
  11.     r.style.setProperty('--backgroundcolor', '#d4d4d4');
  12.     r.style.setProperty('--bodycolor', '#f2f2f2');
  13.     r.style.setProperty('--fontcolor', 'black');
  14.     isdark = 0;
  15.   }
  16. }
英文:

The issue with this code is in the conditional statements within the if and else if blocks.

Instead of using a comparison operator (== or ===) to check the value of isdark, the assignment operator (=) is being used.

This means that isdark is being set to 0 each time the if or else if block is executed, and the code inside the blocks will always run as if isdark was 0.

To fix this, change the = operator to == or === to properly compare the value of isdark:

  1. var r = document.querySelector(&#39;:root&#39;);
  2. var isdark = 0;
  4. function darkLight() {
  5.   if (isdark == 0) {
  6.     r.style.setProperty(&#39;--backgroundcolor&#39;, &#39;#1a1a1a&#39;);
  7.     r.style.setProperty(&#39;--bodycolor&#39;, &#39;#3b3b3b&#39;)
  8.     r.style.setProperty(&#39;--fontcolor&#39;, &#39;white&#39;)
  9.     isdark = 1;
  10.   } else if (isdark == 1) {
  11.     r.style.setProperty(&#39;--backgroundcolor&#39;, &#39;#d4d4d4&#39;)
  12.     r.style.setProperty(&#39;--bodycolor&#39;, &#39;#f2f2f2&#39;)
  13.     r.style.setProperty(&#39;--fontcolor&#39;, &#39;black&#39;)
  14.     isdark = 0;
  15.   }
  16. }

huangapple
  • 本文由 发表于 2023年5月14日 01:20:25
  • 转载请务必保留本文链接：https://go.coder-hub.com/76244046.html
  • css
  • html
  • javascript
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定