小程序中使用cssvar變量(使js可以動態(tài)設(shè)置css樣式屬性)

使用sass,stylus可以很方便的使用變量來做樣式設(shè)計(jì)，其實(shí)css也同樣可以定義變量，在小程序中由于原生不支持動態(tài)css語法，so，可以使用css變量來使用開發(fā)工作變簡單。

創(chuàng)新互聯(lián)專注于企業(yè)成都營銷網(wǎng)站建設(shè)、網(wǎng)站重做改版、衡東網(wǎng)站定制設(shè)計(jì)、自適應(yīng)品牌網(wǎng)站建設(shè)、HTML5建站、商城網(wǎng)站建設(shè)、集團(tuán)公司官網(wǎng)建設(shè)、成都外貿(mào)網(wǎng)站建設(shè)公司、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁設(shè)計(jì)等建站業(yè)務(wù)，價格優(yōu)惠性價比高，為衡東等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。

基本用法

基礎(chǔ)用法

<!--web開發(fā)中頂層變量的key名是:root，小程序使用page-->
page { 
 --main-bg-color: brown;
}

.one {
 color: white;
 background-color: var(--main-bg-color);
 margin: 10px;
}

.two {
 color: white;
 background-color: black;
 margin: 10px;
}
.three {
 color: white;
 background-color: var(--main-bg-color);
}

提升用法

<div class="one">
 <div class="two">
  <div class="three">
  </div>
  <div class="four">
  </div>
 <div>
</div>

.two { --test: 10px; }
.three { --test: 2em; }

在這個例子中，var(--test)的結(jié)果是：

• class="two" 對應(yīng)的節(jié)點(diǎn): 10px
• class="three" 對應(yīng)的節(jié)點(diǎn): element: 2em
• class="four" 對應(yīng)的節(jié)點(diǎn): 10px (繼承自父級.two)
• class="one" 對應(yīng)的節(jié)點(diǎn): 無效值, 即此屬性值為未被自定義css變量覆蓋的默認(rèn)值

上述是一些基本概念，大致說明css變量的使用方法，注意在web開發(fā)中，我們使用:root來設(shè)置頂層變量，更多詳細(xì)說明參考MDN的文檔

妙用css變量

開發(fā)中經(jīng)常遇到的問題是，css的數(shù)據(jù)是寫死的，不能夠和js變量直通，即有些數(shù)據(jù)使用動態(tài)變化的，但css用不了。對了，可以使用css變量試試呀

js

// 在js中設(shè)置css變量
let myStyle = `
--bg-color:red; 
--border-radius:50%;
--wid:200px;
--hgt:200px;
`

let chageStyle = `
--bg-color:red; 
--border-radius:50%;
--wid:300px;
--hgt:300px;
`
Page({
 data: {
  viewData: {
   style: myStyle
  }
 },
 onLoad(){
  setTimeout(() => {
   this.setData({'viewData.style': chageStyle})
  }, 2000);
 }
})

wxml

<!--將css變量(js中設(shè)置的那些)賦值給style-->
<view class="container">
 <view class="my-view" >
  <image src="/images/abc.png" mode="widthFix"/>
 </view>
</view>

wxss

/* 使用var */
.my-view{
 width: var(--wid);
 height: var(--hgt);
 border-radius: var(--border-radius);
 padding: 10px;
 box-sizing: border-box;
 background-color: var(--bg-color);
 transition: all 0.3s ease-in;
}

.my-view image{
 width: 100%;
 height: 100%;
 border-radius: var(--border-radius);
}

通過css變量就可以動態(tài)設(shè)置css的屬性值

代碼片段

https://developers.weixin.qq.com/s/aWfUGCmG7Efe

github

小程序演示

到此這篇關(guān)于小程序中使用css var變量的文章就介紹到這了,更多相關(guān)小程序使用css var變量內(nèi)容請搜索創(chuàng)新互聯(lián)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持創(chuàng)新互聯(lián)！

網(wǎng)頁標(biāo)題：小程序中使用cssvar變量(使js可以動態(tài)設(shè)置css樣式屬性)
轉(zhuǎn)載來源：http://muchs.cn/article42/jejjhc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供標(biāo)簽優(yōu)化、網(wǎng)站制作、企業(yè)網(wǎng)站制作、品牌網(wǎng)站設(shè)計(jì)、網(wǎng)站營銷、做網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)