blocks|key|4363709|text|这就是你要找的东西吗？|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4363710|​|4363711|++++++//+get+the+inputs
++++++const+inputs+=+[].slice.call(document.querySelectorAll('.controls+input'));

++++++//+listen+for+changes
++++++inputs.forEach(input+=>+input.addEventListener('change',+handleUpdate));
++++++inputs.forEach(input+=>+input.addEventListener('mousemove',+handleUpdate));

++++++function+handleUpdate(e)+{
++++++++//+append+'px'+to+the+end+of+spacing+and+blur+variables
++++++++const+suffix+=+(this.id+===+'base'+?+''+:+'px');
++++++++document.documentElement.style.setProperty(`--${this.id}`,+this.value+%2B+suffix);
++++++}|code-block|syntax|javascript|4363712|:root+{
++--base:+#ffc600;
++--spacing:+10px;
++--blur:+10px;
}

body+{
++text-align:+center;
}

img+{
++padding:+var(--spacing);
++background:+var(--base);
++-webkit-filter:+blur(var(--blur));
++/*++*/
++filter:+blur(var(--blur));
}

.hl+{
++color:+var(--base);
}

/*
++++++++misc+styles,+nothing+to+do+with+CSS+variables
++++++*/

body+{
++background:+#193549;
++color:+white;
++font-family:+'helvetica+neue',+sans-serif;
++font-weight:+100;
++font-size:+50px;
}

.controls+{
++margin-bottom:+50px;
}

a+{
++color:+var(--base);
++text-decoration:+none;
}

input+{
++width:100px;
}|4363713|<h2>Update+CSS+Variables+with+<span+class='hl'>JS</span></h2>
<div+class="controls">
++<label>Spacing:</label>
++<input+type="range"+id="spacing"+min="10"+max="200"+value="10">

++<label>Blur:</label>
++<input+type="range"+id="blur"+min="0"+max="25"+value="10">

++<label>Base+Color</label>
++<input+type="color"+id="base"+value="#ffc600">
</div>

<img+src="http://unsplash.it/800/500?image=899">

<p+class="love"></p>

<p+class="love">Chrome+49%2B,+Firefox+31%2B</p>|4363714|4363715|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Q|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|R|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|K|3|L|5|F|7|T|8|@]|9|@]|A|$G|H]]|$1|M|3|C|5|6|7|U|8|@]|9|@]|A|$]]|$1|N|3|-4|5|6|7|V|8|@]|9|@]|A|$]]]|O|$]]

<p>Is this what you are looking for?</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>      // get the inputs
      const inputs = [].slice.call(document.querySelectorAll('.controls input'));

      // listen for changes
      inputs.forEach(input =&gt; input.addEventListener('change', handleUpdate));
      inputs.forEach(input =&gt; input.addEventListener('mousemove', handleUpdate));

      function handleUpdate(e) {
        // append 'px' to the end of spacing and blur variables
        const suffix = (this.id === 'base' ? '' : 'px');
        document.documentElement.style.setProperty(`--${this.id}`, this.value + suffix);
      }</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>:root {
  --base: #ffc600;
  --spacing: 10px;
  --blur: 10px;
}

body {
  text-align: center;
}

img {
  padding: var(--spacing);
  background: var(--base);
  -webkit-filter: blur(var(--blur));
  /*  */
  filter: blur(var(--blur));
}

.hl {
  color: var(--base);
}

/*
        misc styles, nothing to do with CSS variables
      */

body {
  background: #193549;
  color: white;
  font-family: 'helvetica neue', sans-serif;
  font-weight: 100;
  font-size: 50px;
}

.controls {
  margin-bottom: 50px;
}

a {
  color: var(--base);
  text-decoration: none;
}

input {
  width:100px;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;h2&gt;Update CSS Variables with &lt;span class='hl'&gt;JS&lt;/span&gt;&lt;/h2&gt;
&lt;div class="controls"&gt;
  &lt;label&gt;Spacing:&lt;/label&gt;
  &lt;input type="range" id="spacing" min="10" max="200" value="10"&gt;

  &lt;label&gt;Blur:&lt;/label&gt;
  &lt;input type="range" id="blur" min="0" max="25" value="10"&gt;

  &lt;label&gt;Base Color&lt;/label&gt;
  &lt;input type="color" id="base" value="#ffc600"&gt;
&lt;/div&gt;

&lt;img src="http://unsplash.it/800/500?image=899"&gt;

&lt;p class="love"&gt;&lt;/p&gt;

&lt;p class="love"&gt;Chrome 49+, Firefox 31+&lt;/p&gt;</code></pre>
</div>
</div>
</p>


blocks|key|4363316|text|我只需在element/body/whatever上使用默认颜色变量，然后将备用主题颜色放入另一个类中，并通过JS切换主题类。这是一个演示。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4363317|​|4363318|$("button").on("click",+function()+{
++$("body").toggleClass("foo");
});|code-block|syntax|javascript|4363319|body+{
++--red:+red;
++--blue:+blue;
++--yellow:+yellow;
++background:+#ccc;
++text-align:+center;
++font-size:+5em;
}

.foo+{
++--red:+#ce1126;
++--blue:+#68bfe5;
++--yellow:+#ffd100;
}

.red+{
++color:+var(--red);
}

.blue+{
++color:+var(--blue);
}

.yellow+{
++color:+var(--yellow);
}|4363320|<script+src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span+class="red">RED</span>+<span+class="blue">BLUE</span>+<span+class="yellow">YELLOW</span>
<br>
<button>click+me</button>|4363321|4363322|entityMap^0|C|4|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@$9|U|A|V|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|W|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|X|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|J|7|Y|8|@]|D|@]|E|$K|L]]|$1|O|3|P|5|J|7|Z|8|@]|D|@]|E|$K|L]]|$1|Q|3|G|5|6|7|10|8|@]|D|@]|E|$]]|$1|R|3|-4|5|6|7|11|8|@]|D|@]|E|$]]]|S|$]]

<p>I would just use the default color vars on the element/<code>body</code>/whatever, then put the alternate theme colors in another class, and toggle the theme class via JS. Here's a demo.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>$("button").on("click", function() {
  $("body").toggleClass("foo");
});</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>body {
  --red: red;
  --blue: blue;
  --yellow: yellow;
  background: #ccc;
  text-align: center;
  font-size: 5em;
}

.foo {
  --red: #ce1126;
  --blue: #68bfe5;
  --yellow: #ffd100;
}

.red {
  color: var(--red);
}

.blue {
  color: var(--blue);
}

.yellow {
  color: var(--yellow);
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;span class="red"&gt;RED&lt;/span&gt; &lt;span class="blue"&gt;BLUE&lt;/span&gt; &lt;span class="yellow"&gt;YELLOW&lt;/span&gt;
&lt;br&gt;
&lt;button&gt;click me&lt;/button&gt;</code></pre>
</div>
</div>
</p>


blocks|key|4363798|text|我会有两张纸，并有条件地在这两张纸之间切换：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4363799|colours.scss|4363800|:root+{
++/*+Status+colors+*/
++--error:+#842A2B;
++--success:+#657C59;
++--pending:+#666;
++--warning:+#7E6939;
}|code-block|syntax|javascript|4363801|otherColours.scss|4363802|:root+{
++/*+Status+colors+*/
++--error:+#FF0000;
++--success:+#00FF00;
++--pending:+#6666FF;
++--warning:+#FF00FF;
}|4363803|然后在您的react代码中导入它们，并随心所欲地使用它们：|4363804|import+styles+from+'colours.scss';
import+alternativeStyles+from+'otherColours.scss';

...

{this.props.useNormalStyle+?+styles.myClass+:+alternativeStyles.myClass}|4363805|entityMap^0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|T|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|V|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|W|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|X|8|@]|9|@]|A|$]]|$1|O|3|P|5|F|7|Y|8|@]|9|@]|A|$G|H]]|$1|Q|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|R|$]]

<p>I would have 2 sheets and conditionally switch between the two:</p>

<p>colours.scss</p>

<pre><code>:root {
  /* Status colors */
  --error: #842A2B;
  --success: #657C59;
  --pending: #666;
  --warning: #7E6939;
}
</code></pre>

<p>otherColours.scss</p>

<pre><code>:root {
  /* Status colors */
  --error: #FF0000;
  --success: #00FF00;
  --pending: #6666FF;
  --warning: #FF00FF;
}
</code></pre>

<p>then in your react code import them and use them as you wish:</p>

<pre><code>import styles from 'colours.scss';
import alternativeStyles from 'otherColours.scss';

...

{this.props.useNormalStyle ? styles.myClass : alternativeStyles.myClass}
</code></pre>


<p>I'm using a (now older) version of react-boilerplate which came with CSS Modules. What's nice about them is that you can create variables and import them in other CSS files.</p>

<p>Here's my colors.css file</p>

<pre><code>:root {
  /* Status colors */
  --error: #842A2B;
  --success: #657C59;
  --pending: #666;
  --warning: #7E6939;
}
</code></pre>

<p>When I'm importing that file I just have to use at the top of my .css file:</p>

<pre><code>@import 'components/App/colors.css';
</code></pre>

<p>I'm looking to have the option for two themes for my website and I would like to be able to dynamically update those variables with Javascript.  What's the best way to do this?  </p>

<p>Edit: I was hoping there's a way to update the <code>colors.css</code> file and not have to do conditional imports in all the components that draw from two possible css files... let me know if there's a way to do that and if there is I'll change the accepted answer.  Thank you to all who answered!</p>


Update CSS Module variables from Javascript

我使用的是CSS模块附带的react-boilerplate (现在比较老的)版本。它们的优点在于，您可以创建变量并将其导入到其他CSS文件中。这是我的colors.css文件:root {  /* Status colors */  --error: #842A2B;  --success: #657C59;  --...

问从Javascript更新CSS模块变量
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问从Javascript更新CSS模块变量EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问从Javascript更新CSS模块变量
EN