快捷導(dǎo)航

JavaScript編寫css自定義屬性的示例代碼

更新時(shí)間：2024年12月10日 09:21:18 作者：前端熊貓

自定義屬性（有時(shí)候也被稱作CSS變量或者級(jí)聯(lián)變量）是由CSS作者定義的,它包含的值可以在整個(gè)文檔中重復(fù)使用,由自定義屬性標(biāo)記設(shè)定值,,由var() 函數(shù)來獲取值,本文就給大家介紹了JavaScript編寫css自定義屬性,需要的朋友可以參考下

一、自定義屬性

是在 CSS 中定義的變量，以 --開頭。它們可以存儲(chǔ)顏色、尺寸、字體等任何 CSS 值，并且可以在整個(gè)文檔中重復(fù)使用。

:root {
  --primary-color: #3498db;
  --font-size: 16px;
}
 
body {
  color: var(--primary-color);
  font-size: var(--font-size);
}

二、定義自定義屬性

自定義屬性通常在 :root 選擇器中定義，這樣它們就可以在整個(gè)文檔中全局使用。不過，你也可以在任何選擇器中定義自定義屬性，使其作用域僅限于該選擇器及其子元素局部。

/* 全局定義 */
:root {
  --main-bg-color: #f0f0f0;
}
 
/* 局部定義 */
.header {
  --header-height: 60px;
  height: var(--header-height);
}

三、使用自定義屬性

使用 var() 函數(shù)來引用自定義屬性

.button {
  background-color: var(--primary-color);
  padding: var(--padding, 10px); /* 提供默認(rèn)值 */
}

四、JS動(dòng)態(tài)修改自定義屬性

const element = document.querySelector('.container');
element.style.setProperty('--local-color', '#0000ff'); // 修改局部變量
document.documentElement.style.setProperty('--global-color', '#00ffff'); // 修改全局變量

五、應(yīng)用

<template>
  <div ref="leftBg" class="left-bg"></div>
  <button @click="updateTitleImageClass">切換偽類圖片</button>
</template>
 
<script setup>
import { ref, onMounted } from 'vue';
 
const leftBg = ref(null);
const systemTitles = ['cat1', 'cat2', 'cat3'];
let currentTitleIndex = 0;
 
const getBackgroundSize = (title) => {
  // 根據(jù)標(biāo)題返回不同的背景大小
  switch (title) {
    case 'cat1':
      return 'contain';
    case 'cat2':
      return 'cover';
    case 'cat3':
      return 'auto';
    default:
      return 'cover';
  }
};
 
const images = {};
 
const loadImages = async () => {
  for (const title of systemTitles) {
    try {
      const response = await fetch(`/${title}/title.jpg`);
      if (!response.ok) {
        throw new Error(`Failed to fetch image for ${title}`);
      }
      const blob = await response.blob();
      images[`/${title}/title.jpg`] = URL.createObjectURL(blob);
    } catch (error) {
      console.error(`Error loading image for ${title}:`, error);
    }
  }
};
onMounted(
  async () => {
    await loadImages();
    updateTitleImageClass();
  }
);
const updateTitleImageClass = async () => {
  if (!leftBg.value) {
    console.error('沒有找到leftBg節(jié)點(diǎn)');
    return;
  }
 
  const systemTitle = systemTitles[currentTitleIndex];
  const imagePath = `/${systemTitle}/title.jpg`; // 根據(jù)系統(tǒng)標(biāo)題獲取圖片路徑
  if (!images[imagePath]) {
    console.log(`沒有找到對(duì)應(yīng)的圖片路徑: ${imagePath}`);
    return;
  }
  const imageUrl = images[imagePath]; // 獲取圖片路徑
  // 設(shè)置自定義屬性
  leftBg.value.style.setProperty('--background-image', `url(${imageUrl})`);
 
  const backgroundSize = getBackgroundSize(systemTitle);
  leftBg.value.style.setProperty('--background-image-size', backgroundSize);
 
  // 切換到下一個(gè)標(biāo)題
  currentTitleIndex = (currentTitleIndex + 1) % systemTitles.length;
};
</script>
 
<style lang="scss" scoped>
.left-bg {
  width: 100%;
  height: 100px;
  position: relative;
 
  &::before {
    content: '';
    display: block;
    background-image: var(--background-image);
    background-size: var(--background-image-size, cover);
    background-position: center;
    background-repeat: no-repeat;
    width: 100px;
    height: 100%;
    position: absolute;
    top: 0rem;
    left: 0rem;
  }
}
</style>

到此這篇關(guān)于JavaScript編寫css自定義屬性的示例代碼的文章就介紹到這了,更多相關(guān)JavaScript css自定義屬性內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: