JavaScript编写css自定义属性

一、自定义属性

是在 CSS 中定义的变量，以 --开头。它们可以存储颜色、尺寸、字体等任何 CSS 值，并且可以在整个文档中重复使用。

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

二、定义自定义属性

自定义属性通常在 :root 选择器中定义，这样它们就可以在整个文档中全局使用。不过，你也可以在任何选择器中定义自定义属性，使其作用域仅限于该选择器及其子元素局部。

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

三、使用自定义属性

使用 var() 函数来引用自定义属性

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

四、JS动态修改自定义属性

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

五、应用

<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) => {// 根据标题返回不同的背景大小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节点');return;}const systemTitle = systemTitles[currentTitleIndex];const imagePath = `/${systemTitle}/title.jpg`; // 根据系统标题获取图片路径if (!images[imagePath]) {console.log(`没有找到对应的图片路径: ${imagePath}`);return;}const imageUrl = images[imagePath]; // 获取图片路径// 设置自定义属性leftBg.value.style.setProperty('--background-image', `url(${imageUrl})`);const backgroundSize = getBackgroundSize(systemTitle);leftBg.value.style.setProperty('--background-image-size', backgroundSize);// 切换到下一个标题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>