当前位置: 首页 > news >正文

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>

相关文章:

JavaScript编写css自定义属性

一、自定义属性 是在 CSS 中定义的变量&#xff0c;以 --开头。它们可以存储颜色、尺寸、字体等任何 CSS 值&#xff0c;并且可以在整个文档中重复使用。 :root {--primary-color: #3498db;--font-size: 16px; }body {color: var(--primary-color);font-size: var(--font-siz…...

我们来学webservie - WSDL

WSDL 题记WSDL系列文章 题记 举个例子 酒桌上大领导们谈笑风生&#xff0c;把酒临风,其喜洋洋者矣老张说能签下xx项目&#xff0c;一来证明了集团在行业中的翘楚地位&#xff0c;二来感谢各位领导给予的大力支持接下来的一周&#xff0c;项目经理、业务顾问相继入场&#xff0…...

【Agent】构建智能诗歌创作系统:基于多 Agent 的协同创作实现

在探索大语言模型的创意应用过程中&#xff0c;我们开发了一个基于多 Agent 的智能诗歌创作系统。本文将介绍如何通过多个专业化的 Agent 协同工作&#xff0c;实现根据地点和天气信息自动创作诗歌的功能。 GitHub Code 项目地址 核心架构设计 1. Agent 基类设计 from pydan…...

001 LVGL PC端模拟搭建

01 LVGL模拟器介绍 使用PC端软件模拟LVGL运行&#xff0c;而不需要任何嵌入式硬件 环境搭建&#xff1a;codeblocks-20.03mingw-setup 正常安装流程即可 工程获取&#xff1a;LVGL官网-> github仓库 本地安装包下载资源包 工程模版和软件安装包 补充&#xff1a;…...

AJAX三、XHR,基本使用,查询参数,数据提交,promise的三种状态,封装-简易axios-获取省份列表 / 获取地区列表 / 注册用户,天气预报

一、XMLHttpRequest基本使用 XMLHttpRequest&#xff08;XHR&#xff09;对象用于与服务器交互。 二、XMLHttpRequest-查询参数 语法: 用 & 符号分隔的键/值对列表 三、XMLHttpRequest-数据提交 核心步骤 : 1. 请求头 设置 Content-Type 2. 请求体 携带 符合要求 的数…...

mybatis之数据统计与自定义异常处理

文章目录 需求描述定义实体方式一、mybatisPlus实现方式二、自定义SQL实现简单查询过滤查询 异常处理1、SQL拼写异常 在使用Mybatis或MybatisPlus进行数据统计&#xff0c;在【 SpringBoot的Mybatis-plus实战之基础知识】中对mybatisplus引入有介绍&#xff0c;本次要使用其进…...

qt creator使用taglib读取音频元信息,windows平台vcpkg安装

注意&#xff1a;qt creator用的构建组件是qt 6.2.3 MSVC2019 64bit 安装vcpkg // 我的安装位置C:\vcpkg git clone https://github.com/microsoft/vcpkg.git C:\vcpkg cd C:\vcpkg .\bootstrap-vcpkg.bat// 设置系统环境变量 VCPKG_ROOT C:/vcpkg用vcpkg安装taglib vcpkg …...

设计模式之生成器模式

目录 1.简介 2.结构 3.使用场景 4.实例 5.优缺点 6.与其他模式的关系 7.总结 1.简介 生成器模式&#xff08;Builder Pattern&#xff09;是一种创建型设计模式&#xff0c;它允许你通过一步一步构建复杂对象&#xff0c;而不是通过一个包含大量参数的构造函数或方法。该…...

python学opencv|读取图像(三)放大和缩小图像

【1】引言 前序已经学习了常规的图像读取操作和图像保存技巧&#xff0c;相关文章链接为&#xff1a; python学opencv|读取图像-CSDN博客 python学opencv|读取图像&#xff08;二&#xff09;保存彩色图像-CSDN博客 今天我们更近一步&#xff0c;学习放大和缩小图像的技巧&…...

1 数据库(上):MySQL的概述和安装、SQL简介、IDEA连接数据库使用图形化界面

文章目录 前言一、数据库相关的概念二、MySQL概述1 MySQL的安装和配置2 MySQL登录、退出&#xff08;1&#xff09;mysql -uroot -p1234 或者mysql -uroot -p ---- 登录&#xff08;2&#xff09;exit或者quit ---- 退出 3 远程登录服务器上的MySQL命令mysql -hip地址 -P3306 -…...

C++初阶—类与对象(中篇)

第一章&#xff1a;类的6个默认成员函数 如果一个类中什么成员都没有&#xff0c;简称为空类。 空类中真的什么都没有吗&#xff1f;并不是&#xff0c;任何类在什么都不写时&#xff0c;编译器会自动生成以下6个默认成员函数。 默认成员函数&#xff1a;用户没有显式实现&a…...

Leetcode15. 三数之和(HOT100)

链接 一般这种三数之和&#xff0c;四数之和都使用双指针&#xff0c;复杂度最优&#xff0c;次一级可使用哈希表。前者要求有序&#xff0c;后者空间上有花费。 题目&#xff1a; 题目要求答案中不能出现重复vector&#xff0c;比如{-1 1 0}和{-1 0 1}&#xff1b; 这两个…...

Oracle数据库小白备忘

sqlplus相关 导入sql文件 在sqlplus中&#xff0c;导入一个sql文件&#xff0c;是使用或者start。 如当前目录下有一个hello.sql&#xff0c;则可以使用 hello.sql 或者 start hello.sql 来进行导入&#xff0c;功能类似于mysql里面的source。 退出编辑模式 当使用sqlplus…...

DDR4与DDR3服务器内存的关键区别有哪些?

内存作为服务器性能的关键组件之一&#xff0c;已经经历了从DDR3到DDR4的过渡。DDR4内存相较于DDR3在多个方面有所提升&#xff0c;包括速度、带宽、功耗以及数据传输效率等。然而&#xff0c;尽管DDR4内存在性能上占有优势&#xff0c;DDR3内存依然在一些特定场景中得到了广泛…...

Linux: shell: bash: set -x;调试使用

man bash set -x -x After expanding each simple command, for command, case command, select command, or arithmetic for command, display the expanded value of PS4, followed by the command and its expanded arguments or associated word list. 这个可以帮助将变量…...

Hadoop生态圈框架部署 伪集群版(五)- HBase伪分布式部署

文章目录 前言一、Hbase伪分布式部署&#xff08;手动部署&#xff09;1. 下载Hbase2. 上传安装包3. 解压HBase安装包4. 配置HBase配置文件4.1 修改hbase-env.sh配置文件4.2 修改hbase-site.xml配置文件4.3 修改regionservers配置文件4.4 删除hbase中slf4j-reload4j-1.7.33.jar…...

自定义指令,全局,局部,注册

让输入框自动获取焦点(每次刷新自动获取焦点&#xff09; <template><div><h3>自定义指令</h3><input ref"inp" type"text"></div> </template><script> export default {mounted(){this.$refs.inp.focus…...

静坐修心.

文章目录 打坐的历史文化渊源东方的起源与传承西方的接受与演变现代生活中的打坐 盘腿坐对身体的影响促进脊椎健康改善呼吸系统功能增强消化系统机能改善血液循环调节神经系统错误姿势及其他潜在危害 盘腿坐对心理的作用促进内心平静与放松提升自我觉察与内在探索培养专注力与精…...

设计模式c++(一)

文章目录 一、面向对象设计原则二、模版方法三、策略模式四、观察者模式五、装饰模式六、桥模式七、工厂方法_Factory Method八、抽象工厂_Abstract Factory九、原型模式十、构建器_builder十一、单件模式_Singleton十二、享元模式_Flyweight 一、面向对象设计原则 设计模式的…...

核密度估计——从直方图到核密度(核函数)估计_带宽选择

参考 核密度估计&#xff08;KDE&#xff09;原理及实现-CSDN博客 机器学习算法&#xff08;二十一&#xff09;&#xff1a;核密度估计 Kernel Density Estimation(KDE)_算法_意念回复-GitCode 开源社区 引言 在统计学中&#xff0c;概率密度估计是一种重要的方法&#xff0…...

三维GIS开发cesium智慧地铁教程(5)Cesium相机控制

一、环境搭建 <script src"../cesium1.99/Build/Cesium/Cesium.js"></script> <link rel"stylesheet" href"../cesium1.99/Build/Cesium/Widgets/widgets.css"> 关键配置点&#xff1a; 路径验证&#xff1a;确保相对路径.…...

Leetcode 3577. Count the Number of Computer Unlocking Permutations

Leetcode 3577. Count the Number of Computer Unlocking Permutations 1. 解题思路2. 代码实现 题目链接&#xff1a;3577. Count the Number of Computer Unlocking Permutations 1. 解题思路 这一题其实就是一个脑筋急转弯&#xff0c;要想要能够将所有的电脑解锁&#x…...

转转集团旗下首家二手多品类循环仓店“超级转转”开业

6月9日&#xff0c;国内领先的循环经济企业转转集团旗下首家二手多品类循环仓店“超级转转”正式开业。 转转集团创始人兼CEO黄炜、转转循环时尚发起人朱珠、转转集团COO兼红布林CEO胡伟琨、王府井集团副总裁祝捷等出席了开业剪彩仪式。 据「TMT星球」了解&#xff0c;“超级…...

vue3 字体颜色设置的多种方式

在Vue 3中设置字体颜色可以通过多种方式实现&#xff0c;这取决于你是想在组件内部直接设置&#xff0c;还是在CSS/SCSS/LESS等样式文件中定义。以下是几种常见的方法&#xff1a; 1. 内联样式 你可以直接在模板中使用style绑定来设置字体颜色。 <template><div :s…...

k8s业务程序联调工具-KtConnect

概述 原理 工具作用是建立了一个从本地到集群的单向VPN&#xff0c;根据VPN原理&#xff0c;打通两个内网必然需要借助一个公共中继节点&#xff0c;ktconnect工具巧妙的利用k8s原生的portforward能力&#xff0c;简化了建立连接的过程&#xff0c;apiserver间接起到了中继节…...

Java面试专项一-准备篇

一、企业简历筛选规则 一般企业的简历筛选流程&#xff1a;首先由HR先筛选一部分简历后&#xff0c;在将简历给到对应的项目负责人后再进行下一步的操作。 HR如何筛选简历 例如&#xff1a;Boss直聘&#xff08;招聘方平台&#xff09; 直接按照条件进行筛选 例如&#xff1a…...

代码随想录刷题day30

1、零钱兑换II 给你一个整数数组 coins 表示不同面额的硬币&#xff0c;另给一个整数 amount 表示总金额。 请你计算并返回可以凑成总金额的硬币组合数。如果任何硬币组合都无法凑出总金额&#xff0c;返回 0 。 假设每一种面额的硬币有无限个。 题目数据保证结果符合 32 位带…...

LangChain知识库管理后端接口:数据库操作详解—— 构建本地知识库系统的基础《二》

这段 Python 代码是一个完整的 知识库数据库操作模块&#xff0c;用于对本地知识库系统中的知识库进行增删改查&#xff08;CRUD&#xff09;操作。它基于 SQLAlchemy ORM 框架 和一个自定义的装饰器 with_session 实现数据库会话管理。 &#x1f4d8; 一、整体功能概述 该模块…...

C#学习第29天:表达式树(Expression Trees)

目录 什么是表达式树&#xff1f; 核心概念 1.表达式树的构建 2. 表达式树与Lambda表达式 3.解析和访问表达式树 4.动态条件查询 表达式树的优势 1.动态构建查询 2.LINQ 提供程序支持&#xff1a; 3.性能优化 4.元数据处理 5.代码转换和重写 适用场景 代码复杂性…...

作为测试我们应该关注redis哪些方面

1、功能测试 数据结构操作&#xff1a;验证字符串、列表、哈希、集合和有序的基本操作是否正确 持久化&#xff1a;测试aof和aof持久化机制&#xff0c;确保数据在开启后正确恢复。 事务&#xff1a;检查事务的原子性和回滚机制。 发布订阅&#xff1a;确保消息正确传递。 2、性…...