用织梦后台修改网站logo,万户网络科技有限公司怎么样,音乐网站模板下载,数据库型网站一、自定义属性
是在 CSS 中定义的变量#xff0c;以 --开头。它们可以存储颜色、尺寸、字体等任何 CSS 值#xff0c;并且可以在整个文档中重复使用。
:root {--primary-color: #3498db;--font-size: 16px;
}body {color: var(--primary-color);font-size: var(--font-siz…一、自定义属性
是在 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); // 修改全局变量
五、应用 templatediv refleftBg classleft-bg/divbutton clickupdateTitleImageClass切换伪类图片/button
/templatescript 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;
};
/scriptstyle langscss 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
