從Javascript更新CSS模塊變量

我正在使用CSS模塊附帶的react-boilerplate（現在較舊）版本。他們的好處是你可以創建變量並將它們導入到其他CSS文件中。從Javascript更新CSS模塊變量

這是我的colors.css文件

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

當我輸入這個文件我只是在我的.css文件的頂部使用方法：

@import 'components/App/colors.css';

我期待有我的網站的兩個主題的選項，我希望能夠動態更新這些變量與Javascript。什麼是最好的方法來做到這一點？

編輯：我希望有一種方法來更新colors.css文件，而不必在從兩個可能的CSS文件中繪製的所有組件進行條件導入...讓我知道是否有辦法做到這一點，如果我會改變接受的答案。謝謝所有回答的人！

來源

2017-04-21 NateW

最簡單的方法是覆蓋CSS使用'important' –

@JaredChu我只是希望更新在這一個位置的色彩，多個其他CSS文件讀取。所以我問如何更新變量，而不是覆蓋它們。雖然謝謝！ – NateW

您是使用PostCSS處理CSS變量還是僅使用它們本身？如果PostCSS，您當前的PostCSS插件堆棧是什麼？ –

這是你在找什麼？

 // 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 + suffix); 
 
     }

: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; 
 
}

<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+, Firefox 31+</p>

來源

2017-04-27 09:54:51

我只想用默認的顏色瓦爾元素/ body /什麼，然後把備用主題顏色另一個類，並通過JS切換主題類。這是一個演示。

$("button").on("click", function() { 
 
    $("body").toggleClass("foo"); 
 
});

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); 
 
}

<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>

來源

2017-04-28 00:39:03

我將有2片材和兩者之間有條件切換：

colours.scss

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

otherColours.scss

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

然後在反應代碼導入它們，並根據需要使用它們！

import styles from 'colours.scss'; 
import alternativeStyles from 'otherColours.scss'; 

... 

{this.props.useNormalStyle ? styles.myClass : alternativeStyles.myClass}

來源

2017-05-03 18:03:40

從Javascript更新CSS模塊變量

回答

相關問題