标签: css-variables
如何在CSS中将颜色定义为变量？
我正在研究一个很长的CSS文件.我知道客户端可能会要求更改配色方案,并且想知道:是否可以为变量指定颜色,以便我可以更改变量以将新颜色应用于使用它的所有元素？
请注意,我无法使用PHP动态更改CSS文件.
推荐指数
解决办法
查看次数
如何将不透明度应用于CSS颜色变量？
我正在设计一个电子应用程序,所以我可以访问CSS变量.我在一个颜色变量中定义了vars.css:
:root {
--color: #f0f0f0;
}
我想使用这种颜色main.css,但应用了一些不透明度:
#element {
background: (somehow use var(--color) at some opacity);
}
我该怎么做呢？我没有使用任何preprocesser,只有CSS.我更喜欢全CSS答案,但我会接受JavaScript/jQuery.
我无法使用,opacity因为我使用的背景图片不应该是透明的.
推荐指数
解决办法
查看次数
CSS本机变量不适用于媒体查询
我试图在媒体查询中使用CSS变量,但它不起作用.
:root {
--mobile-breakpoint: 642px;
}
@media (max-width: var(--mobile-breakpoint)) {
}
推荐指数
解决办法
查看次数
从javascript访问CSS变量
有没有办法从javascript访问css变量？这是我的css变量声明.
:root {
--color-font-general: #336699;
}
推荐指数
解决办法
查看次数
有没有办法用url()插入CSS变量？
我想将我的后台URL存储在自定义属性(CSS变量)中,并将它们与background属性一起使用.但是,在将字符串用作参数时,我无法找到插入字符串的方法url().
这是我的示例代码:
:root {
--url: "https://download.unsplash.com/photo-1420708392410-3c593b80d416";
}
body {
background: url(var(--url));
}
我知道这可以使用插值函数在Sass或LESS中轻松完成,但我很好奇是否有办法在没有任何预处理器的情况下完成.
推荐指数
解决办法
查看次数
通过JavaScript访问CSS自定义属性(也称为CSS变量)
如何var(…)使用JavaScript(plain或jQuery)获取和设置CSS自定义属性(在样式表中访问的属性)？
这是我不成功的尝试:单击按钮更改常用font-weight属性,但不更改自定义--mycolor属性:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<style>
body {
--mycolor: yellow;
background-color: var(--mycolor);
}
</style>
</head>
<body>
<p>Let's try to make this text bold and the background red.</p>
<button onclick="plain_js()">Plain JS</button>
<button onclick="jQuery_()">jQuery</button>
<script>
function plain_js() {
document.body.style['font-weight'] = 'bold';
document.body.style['--mycolor'] = 'red';
};
function jQuery_() {
$('body').css('font-weight', 'bold');
$('body').css('--mycolor', 'red');
}
</script>
</body>
</html>
推荐指数
解决办法
查看次数
许多 CSS 变量对性能的影响
这是一个有点笼统的问题。
有人知道在给定文档中使用多个 CSS 变量对性能的影响吗？有人做过测试吗？
您将变量关联到的元素是否对性能有任何影响？例如，将所有变量分配给所有变量而:root不是将它们分配给可能只使用它们的单个样式块，对性能的影响是否更大？
推荐指数
解决办法
查看次数
如何使用JavaScript检测CSS变量支持？
最新版本的Firefox支持CSS变量,但Chrome,IE和其他浏览器的数量都没有.应该可以访问DOM节点或编写一个返回浏览器是否支持此功能的方法,但是我无法找到当前能够执行此操作的任何内容.我需要的是一个解决方案,如果浏览器不支持该功能,我可以将其用作运行代码的条件,例如:
if (!browserCanUseCssVariables()) {
// Do stuff...
}
推荐指数
解决办法
查看次数
你如何检查浏览器中的CSS变量？
:root {
--my-colour: #000;
}
并像这样访问它们:
.my-element {
background: var( --my-colour );
}
哪个工作正常.
但是,我想知道是否有一种调试或检查:rootCSS规则的方法,以查看已定义的变量,以及它们的值是什么？
根据我的理解,:root选择器和html选择器都针对相同的元素,但是当我html使用Chrome的调试工具检查元素时,我看不到任何定义:
有没有办法找出已定义的变量及其值？
推荐指数
解决办法
查看次数
在伪元素的"content:"属性中使用CSS变量(自定义属性)
使用示例(我想要的)
div::after {
content: var(--mouse-x) ' / ' var(--mouse-y);
}
显示它不工作的测试用例:
CodePen:Jase Smith的伪元素"内容:"属性(测试用例)中的CSS变量
document.addEventListener('mousemove', (e) => {
document.documentElement.style.setProperty('--mouse-x', e.clientX)
document.documentElement.style.setProperty('--mouse-y', e.clientY)
// output for explanation text
document.querySelector('.x').innerHTML = e.clientX
document.querySelector('.y').innerHTML = e.clientY
})/* what I want!! */
div::after {
content: var(--mouse-x, 245)" / " var(--mouse-y, 327);
}
/* setup and presentation styles */
div::before {
content: 'mouse position:';
}
div {
position: absolute;
top: 0;
left: 0;
transform: translate(calc(var(--mouse-x, 245) * 1px), calc(var(--mouse-y, 327) * 1px));
width: 10em;
height: …推荐指数
解决办法
查看次数