溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

在CSS中怎么使用JS變量

發(fā)布時間：2022-02-22 16:06:31 來源：億速云 閱讀：254 作者：iii 欄目：開發(fā)技術(shù)

這篇“在CSS中怎么使用JS變量”文章的知識點大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“在CSS中怎么使用JS變量”文章吧。

幻想

以前做項目的時候經(jīng)常會這么想：

<template>
  <h2>{{ color }}</h2>
</template>


<script>
export default {
  data () {
    return {
        color: 'red'
    }
  }
}
</script>


<style>
h2 {
  color: this.color;
}
</style>

當然，想想也知道不可能，JS和CSS隸屬不同上下文，CSS哪來的this呢？

那么怎么才能在CSS中使用JS變量呢？那就只能用JS操作DOM然后把變量塞進style里了，比如用ref獲取到DOM元素，然后dom.style.color = this.color。

或者在模板里：

<template>
  <h2 :>Vue</h2>
</template>


<script>
export default {
  data () {
    return {
        color: 'red'
    }
  }
}
</script>

不過這種方式還是有缺陷的，比如本來就不推薦把樣式寫在style屬性里，還有就是變量復(fù)用會很麻煩，比如一組DOM元素都想用這個變量，那就不得不給這一組起個類名，然后再在mounted里面document.getElementsByClassName()，獲取到DOM集合之后還要循環(huán)遍歷每個元素，為其加上dom.style.color = this.color，浪費了很多的性能。

其實CSS本身有很多缺陷，并不圖靈完備，所以才導(dǎo)致了各種預(yù)處理器的出現(xiàn)：Sass、Less、Stylus等……

它們?yōu)?code>CSS提供了很多特性：循環(huán)、條件語句、變量、函數(shù)等……

其中有個特性非常有用，那就是變量！于是CSS也引入了變量的這個概念，自從有了CSS變量，很多事情真的方便了許多，通過JS操作CSS變量，然后再在需要的地方使用CSS變量，這種方法比之前的高效得多。

什么是CSS變量

在JS里(不止JS，所有語言都差不多)，變量有如下幾個特性：

  • 聲明

  • 使用

  • 作用域

聲明

為了方便理解，咱們通過用JS的方式來類比：

var color = 'red';

在CSS中等同于：

--color: red;

當然這點跟JS不太一樣，但是如果你學(xué)PHP這類語言或者Sass的話應(yīng)該就很好理解了，在PHP或Sass中，聲明變量的時候沒有一個關(guān)鍵字，而是在變量名的第一位加上一個美元符號$，這就代表聲明變量了。

PHP:

$color = 'red';

Sass:

$color: color;

但是$符號被Sass占用了，@符號被less占了，所以CSS只能想出別的符號了，CSS的符號就是兩個減號--

使用

光聲明一個變量是沒有什么太大意義的，只有使用了它，這個變量才算有價值：

JS:

console.log(color)

可以看到var只是個聲明變量的關(guān)鍵字，color才是變量名。

PHP:

echo $color;

Scss:

h2 {
    color: $color;
}

但是在PHP或Sass中，聲明變量的時候帶著，用的時候也得帶著。

這就令許多開發(fā)者感到困惑，所以CSS在使用變量的時候用到了一個函數(shù)叫var()：

CSS:

h2 {
    color: var(--color);
}

雖然和PHP、Sass一樣，調(diào)用時要帶著前綴(因為那就是變量名的一部分)，但是不一樣的是需要用一個var()來把變量包裹起來。

作用域

這個很好理解，不僅JS里有作用域，CSS里也有作用域，比如：

JS:

var color = 'red';


function h2 () {
    console.log(color);
}


function div () {
    var color = 'blue';
    console.log(color);
}


h2(); // red
div(); // blue

類似于CSS里的：

body {
    --color: red;
}


h2 {
    color: var(--color); /** 這里獲取到的是全局聲明的變量，值為red **/
}


div {
    --color: blue;
    color: var(--color); /** 這里獲取到的是局部聲明的變量，值為blue **/
}

也就是說，變量的作用域就是它所在的選擇器的有效范圍。

中文CSS變量

有一次我看到了兩個腦洞大開的庫，才發(fā)現(xiàn)CSS變量還可以這么玩：

  • chinese-gradient

  • chinese-layout

從他倆的名字就可以看出，都是用chinese開頭的，那么大概率就是用中文做的CSS變量，點進去一看果不其然。

也就是說CSS變量的包容性很強，不像以往編程的時候都必須是英文命名，中文這次居然也可以完美運行，不信咱們來試一下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- 在這里用link標簽引入中文布局 -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/chinese-layout">


  <!-- 在這里用link標簽引入中文漸變色 -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/chinese-gradient">
  <style>
    /* 清除默認樣式 */
    * { padding: 0; margin: 0 }
    ul { list-style: none }


    /* 全屏顯示 */
    html, body, ul { height: 100% }


    /* 在父元素上寫入九宮格 */
    ul {
      display: grid;
      grid: var(--九宮格);
      gap: 5px
    }


    /* 給子元素上色 */
    li {
      background: var(--極光綠)
    }
  </style>
</head>
<body>
  <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</body>
</html>

也就是說，CSS變量可以這樣定義：

body {
    --藍綠色: aquamarine;
}

然后調(diào)用的時候：

h2 {
    color: var(--藍綠色);
}

在vue中的變量

那么怎樣才能在 vue3 的 <style> 中使用**<script>**里聲明的變量呢？

首先我們先創(chuàng)建個支持vue3的vite項目：

npm init vite-app vars

然后進入到該文件夾安裝依賴：

cd vars

npm i

然后創(chuàng)建一個組件，組件型式長這樣：

<template>
  <h2>{{ color }}</h2>
</template>


<script>
export default {
  data () {
    return {
      color: 'red'
    }
  }
}
</script>


<style vars="{ color }">
h2 {
  color: var(--color);
}
</style>

還記得文章一開始寫的幻想中的組件是什么樣嗎：

<style>
h2 {
  color: this.color;
}
</style>

但是就算vue再牛它也不可能給CSS安個this啊，除非再做一個什么預(yù)處理器，不過這次利用CSS變量已經(jīng)可以很接近咱們幻想中的組件啦：

<style vars="{ color }">
h2 {
  color: var(--color);
}
</style>

首先要在<style>標簽中寫個vars="{}"，再在大括號里寫上你在data中聲明過的值。

再來試一下這個變量是不是響應(yīng)式的，動態(tài)改變<script>標簽中的this.color值會不會引起視圖的變化呢？來試一下：

<template>
  <h2>Vue</h2>
</template>


<script>
export default {
  data () {
    return {
      opacity: 0
    }
  },
  mounted () {
    setInterval(_ => {
      this.opacity >= 1 && (this.opacity = 0)
      this.opacity += 0.2
    }, 300)
  }
}
</script>


<style vars="{ opacity }">
h2 {
  color: rgb(65, 184, 131);
  opacity: var(--opacity);
}
</style>

可以看到每 300 毫秒我們就改變一下this.opacity的值，它會映射到CSS變量上去，this.opacity變了，--opacity的值就會隨之變化，視圖也會隨著數(shù)據(jù)的更新而相應(yīng)的更新，這個特性簡直太棒了！

多個變量之間使用逗號進行分隔：

<template>
  <h2>Vue</h2>
</template>


<script>
export default {
  data () {
    return {
      border: '1px solid black',
      color: 'red'
    }
  }
}
</script>


<style vars="{ border, color }" scoped>
h2 {
  color: var(--color);
  border: var(--border);
}
</style>

腦洞大開

既然chinese-gradient和chinese-layout這兩個CSS庫驗證了CSS中文變量的可行性，而且我記得對象的屬性也是可以寫中文的，那么咱們就來試一下在vue中能不能用這種黑魔法來寫中文：

<template>
  <h2>Vue</h2>
</template>


<script>
export default {
  data () {
    return {
      '透明度': 0
    }
  },
  mounted () {
    setInterval(_ => {
      this['透明度'] >= 1 && (this['透明度'] = 0)
      this['透明度'] += 0.2
    }, 300)
  }
}
</script>


<style vars="{ 透明度 }">
h2 {
  color: rgb(65, 184, 131);
  opacity: var(--透明度);
}
</style>

原理

猜也能猜到，大概率是用到了類似于dom.style.setProperty('--opacity', this.opacity)之類的方法，按下 f12 打開控制臺一看，果不其然，它控制的是組件元素的style屬性：

不過我們剛才在<style>標簽中只用到了var，scoped其實也很常用，那么如果他們兩個碰到一起去會編譯成什么樣呢？

<style vars="{ 透明度 }" scoped>
h2 {
  color: var(--透明度);
}
</style>

可以看到Vue把CSS變量也編譯了一個和data-v-后面的那串隨機字符一樣的：

那么問題來了，假如我要是在全局樣式里定義了一個--color屬性，我在帶有scoped屬性的組件里想用這個全局的CSS變量，可是一旦在scoped中使用CSS變量就會被編譯成：--62a9ebed-color，可是全局定義的不是--62a9ebed-color而是--color，這樣就會出現(xiàn)找不到全局屬性的局面，這個問題要怎么解決呢？其實也很簡單，只需要在--的后面加上一個global:就可以了：

<style vars="{ color }" scoped>
h2 {
  color: var(--global:color);
}
</style>

以上就是關(guān)于“在CSS中怎么使用JS變量”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對大家有幫助，若想了解更多相關(guān)的知識內(nèi)容，請關(guān)注億速云行業(yè)資訊頻道。

向AI問一下細節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手