css裡面能用var變數嗎-前端問答-PHP中文網

css裡面能用var變數嗎

WBOY

發布： 2022-06-06 16:57:42

原創

2030 人瀏覽過

css裡面能用var變數；可以利用var()函數來插入css變數的值，css變數可以存取DOM，也可以利用該函數來讀取變量，語法為「var(變數名稱, value)”，第二個參數的值可用來表示變數的預設值。

css裡面能用var變數嗎

本教學操作環境：windows10系統、CSS3&&HTML5版本、Dell G3電腦。

css裡面能用var變數嗎

var() 函數用來插入自訂的屬性值，如果一個屬性值在多處被使用，方法就很有用。

var() 函數用來插入 CSS 變數的值。

CSS 變數可以存取 DOM，這表示您可以建立具有局部或全域範圍的變量，使用 JavaScript 來修改變量，以及基於媒體查詢來修改變數。

使用 CSS 變數的一種好方法涉及設計的顏色。您可以將它們放在變數中，而不必一遍又一遍地複製和貼上相同的顏色。

var() 函數的語法如下：

var(name, value)

登入後複製

name 必要。變數名（以兩條破折號開頭）。

value 可選。回退值（在未找到變數時使用）。

var() 如何運作

首先：CSS 變數可以有全域或局部作用域。

全域變數可以在整個文件中存取/使用，而局部變數只能在宣告它的選擇器內部使用。

如需建立具有全域作用域的變量，請在 :root 選擇器中聲明它。 :root 選擇器符合文件的根元素。

如需建立具有局部作用域的變量，請在將要使用它的選擇器中宣告它。

下面的例子與上面的例子相同，但在這裡我們使用 var() 函數。

首先，我們宣告兩個全域變數（--blue 和 --white）。然後，我們使用var() 函數稍後在樣式表中插入變數的值：

實例

<!DOCTYPE html>
<html>
<head>
<style>
:root {
  --blue: #1e90ff;
  --white: #ffffff; 
}
body {
  background-color: var(--blue);
}
h2 {
  border-bottom: 2px solid var(--blue);
}
.container {
  color: var(--blue);
  background-color: var(--white);
  padding: 15px;
}
button {
  background-color: var(--white);
  color: var(--blue);
  border: 1px solid var(--blue);
  padding: 5px;
}
</style>
</head>
<body>
<h1>使用 var() 函数</h1>
<div class="container">
  <h2>Welcome to Shanghai!</h2>
  <p>Shanghai is one of the four direct-administered municipalities of the People&#39;s Republic of China.</p>
  <p>Shanghai is one of the four direct-administered municipalities of the People&#39;s Republic of China.</p>
  <p>
    <button>Yes</button>
    <button>No</button>
  </p>
</div>
</body>
</html>

登入後複製

輸出結果：

css裡面能用var變數嗎