首页 前端知识 CSS的var()函数用法与JS获取css函数变量值的方法

CSS的var()函数用法与JS获取css函数变量值的方法

2024-02-11 10:02:03 前端知识 前端哥 277 785 我要收藏

项目场景

        我们常在项目里见到这种写法。

<template>
<div
id="dashboardLayout"
:style="styleCSSVariable"
></div>
</template>
复制

    可以看到,根元素这里使用了一个名为styleCSSVariable的CSS集。这里的实现是:

get styleCSSVariable() {
return createDashboardCSS(this.dashboard.setting.style);
}
复制

        这里可以根据当前仪表盘的用户设置风格(如“暗黑”、“科技”、“酷炫”)进行css样式管理。return了诸如这些设置:

return {
// 文字颜色
'--font': '#cccccc',
'--font-sub': '#999999',
'--font-info': '#666666',
// 辅助文字
'--font-color-secondary': '#aaaaaa',
// 提示性文字
'--font-color-info': '#ff2d2d',
'--font-active-light': '#ffffff',
// 删除按钮/文字
'--delete': '#fe5959',
// 警示色
'--warning': '#ff9900',
// 操作成功
'--success': '#19be6b'
....
}
复制

        可以看到设计器的元素style样式上绑定了一堆颜色定义。这其实就是CSS中的var()函数用法。

CSS变量

        CSS变量(var)是CSS3新增加的一项功能,它可以让我们在样式表中定义一个变量,然后在样式表中的其他地方使用这个变量,从而实现样式的复用。

        CSS 变量可以访问 DOM,这意味着您可以创建具有局部或全局范围的变量,使用 JavaScript 来修改变量,以及基于媒体查询来修改变量。

Var()函数

var(name)
复制

     background-color: var(--font-active);

        var() 函数用于获取插入 CSS 变量的值。当然你也可以用var(name,val),val为获取不到var(name)时返回的默认值

全局变量

        写在HTML文档的根元素上面的,我们用伪类选择器来:root获取。

        在每个HTML文档中,只有一个根元素,通常是标签。

<!DOCTYPE html>
<html />
<head />
<style>
:root {
--blue: #1e90ff;
--white: #ffffff;
}
</style>
复制

局部变量

        如项目中的例子,你可以选择一个容器元素进行注入

<style>
#dashboardLayout {
--blue: #1e90ff;
--white: #ffffff;
}
</style>
复制

        或者像刚才案例通过JS或Vue进行注入,只要绑定到它的style上就行。

        局部变量只能在容器内部里获取到css变量值,而全局则是整个页面里的元素都能获取。

 css里获取CSS绑定的CSS变量值

.component h1 {
color: var(--blue)
}
复制

JS里获取CSS绑定的CSS变量值

        需要借助Window.getComputedStyle方法返回制定元素的CSS熟悉对象

<html lang="en">
<body>
<div class="own" id="own">
</div>
</body>
</html>
<style>
.own {
--ownColor: '#fffff';
font-size: 16;
}
</style>
<script>
let elem1 = document.getElementById("own");
var valObj = window.getComputedStyle(elem1);
console.log(valObj)
console.log(valObj['ownColor'])
console.log(valObj.getPropertyValue('--ownColor'))
</script>
复制

         注意,传入getComputedStyle是确切的元素对象。返回的style是一个实时的 CSSStyleDeclaration 对象,当元素的样式更改时,它会自动更新本身。

        那么可以看到这个对象是一个类数组对象。假如我们心急地直接用valObj['ownColor']来获取css变量值,那么返回的肯定是undefined。此时需要借助另外一个函数

CSSStyleDeclaration.getPropertyValue() 接口返回一个 DOMString ,其中包含请求的 CSS 属性的值

         如果在Vue+ts的环境里,我们应该如何优雅书写这个方法?

const skinColor = getSkin('--font-sub');
复制
/**
* 获取全局颜色
* @param {*} key
* @returns
*/
export function getSkin(key) {
// 找到根部容器或局部容器
const dom = document.querySelector('#dashboardLayout');
return getComputedStyle(
// 顶部容器不存在,则选择网页文档根元素
dom ? dom : document.documentElement,
).getPropertyValue(key);
}
复制
/** [MDN Reference](https://developer.mozilla.org/docs/Web/API/Window/getComputedStyle) */
declare function getComputedStyle(elt: Element, pseudoElt?: string | null): CSSStyleDeclaration;
declare var CSSStyleDeclaration: {
prototype: CSSStyleDeclaration;
new(): CSSStyleDeclaration;
};
复制

转载请注明出处或者链接地址:https://www.qianduange.cn//article/1696.html
标签
评论
发布的文章

jQuery&layui

2024-02-24 15:02:18

HTML/CSS JavaScript jQuery

2024-02-24 15:02:15

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!