JavaScript編寫css自定義屬性的示例代碼
更新時間：2024年12月10日 09:21:18 作者：前端熊貓
自定義屬性（有時候也被稱作CSS變量或者級聯(lián)變量）是由CSS作者定義的,它包含的值可以在整個文檔中重復使用,由自定義屬性標記設定值,,由var() 函數來獲取值,本文就給大家介紹了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動態(tài)修改自定義屬性
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節(jié)點');
return;
}
const systemTitle = systemTitles[currentTitleIndex];
const imagePath = `/${systemTitle}/title.jpg`; // 根據系統(tǒng)標題獲取圖片路徑
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>到此這篇關于JavaScript編寫css自定義屬性的示例代碼的文章就介紹到這了,更多相關JavaScript css自定義屬性內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
本篇文章主要是對js 事件截取enter按鍵頁面提交事件示例代碼進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-03-03
注冊模塊中輸入密碼需要顯示密碼強度（低中高）本例將做的效果給大家分享下2014-06-06
這篇文章主要為大家詳細介紹了Javascript下拉刷新的簡單實現(xiàn)過程，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-02-02
JavaScript常用正則驗證函數實例小結【年齡,數字,Email,手機,URL,日期等】
這篇文章主要介紹了JavaScript常用正則驗證函數,結合實例形式總結分析了javascript針對年齡、數字、Email、手機、URL、日期等格式常用正則驗證技巧,需要的朋友可以參考下2017-01-01
這篇文章主要介紹了js自定義trim函數實現(xiàn)刪除兩端空格功能,結合實例形式分析了javascript基于正則替換實現(xiàn)類似trim函數刪除字符串兩端空格的相關操作技巧,并附帶jQuery類似功能函數使用方法,需要的朋友可以參考下2018-02-02
這篇文章主要介紹了JS去除iframe滾動條的方法,涉及javascript操作iframe中屬性的技巧,非常具有實用價值,需要的朋友可以參考下2015-04-04
這篇文章主要介紹了PHP抓取HTTPS內容的實現(xiàn)方法，以及在抓取的時候遇到的一個HTTPS問題的處理辦法，有需要的朋友們可以參考借鑒，下面來一起看看吧。2016-09-09
微信小程序開發(fā)中var that =this的用法詳解
這篇文章主要介紹了微信小程序開發(fā)中var that =this的用法詳解，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-01-01
這篇文章主要為大家詳細介紹了如何編寫一個 JavaScript 方法來檢測瀏覽器是否支持特定的 CSS3 屬性,感興趣的小伙伴可以跟隨小編一起學習一下2024-12-12
本文主要介紹了JavaScript腳本延遲加載有哪些方式,主要介紹了五種方式,文中通過示例代碼介紹的非常詳細,需要的朋友們下面隨著小編來一起學習學習吧2024-04-04