有没有办法从javascript访问css变量？这是我的css变量声明.
:root {
--color-font-general: #336699;
}
是否可以使用jQuery更改CSS中使用的变量？简单的例子:
html {
--defaultColor: teal;
}
.box {
background: var(--defaultColor);
width: 100px;
height: 100px;
margin: 5px;
float: left;
}
.circle {
background: #eee;
border: 2px solid var(--defaultColor);
width: 100px;
height: 100px;
margin: 5px;
float: left;
border-radius: 100%;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="clickToChange" type="button" style="width: 100%;">Click to Change</button>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<br/>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>例如,如何将变量颜色从青色更改为红色？这个不起作用.
$("#clickToChange").click(function(){
$(html).css("--defaultColor", "red");
});
我有JS库,我有这个问题:我正在使用等宽字体创建用于计算字符大小的临时元素.现在我正在复制风格,但我需要原始的所有样式,包括css变量.我不想克隆元素,因为里面有我不需要的元素.此外,元素可能具有用户设置的id,不确定当存在两个具有相同id的元素时这将如何表现,因此将每个样式复制到新的临时元素会更好(我认为).
我有基于这些的代码:
我的代码看起来像这样:
function is_valid_style_property(key, value) {
//checking that the property is not int index ( happens on some browser
return typeof value === 'string' && value.length && value !== parseInt(value);
}
function copy_computed_style(from, to) {
var computed_style_object = false;
computed_style_object = from.currentStyle || document.defaultView.getComputedStyle(from, null);
if (!computed_style_object) {
return;
}
Object.keys(computed_style_object).forEach(function(key) {
var value = computed_style_object.getPropertyValue(key);
if (key.match(/^--/)) {
console.log({key, value}); // this is never executed
}
if (is_valid_style_property(key, value)) {
to.style.setProperty(key, value);
}
});
}
问题是 …
我最近开始使用Vue.js 2，并且喜欢单文件组件结构：
<template>
<h1>Hello World</h1>
</template>
<script>
export default {
name: 'hello-world',
};
</script>
<style scoped lang="scss">
h1 {
font-size: 72px;
}
</style>
不过，我很好奇是否存在一种在SCSS和JS之间传递变量的既定方法。我需要共享一个值，现在在两个部分中都重复了一个值。
我使用Vue CLI创建了这个项目，因此使用vue-loader将其与Webpack 2捆绑在一起。我希望有一种方法可以配置它以将变量从JS填充到SCSS，反之亦然。
我想知道是否可以仅在定义了 css 变量的情况下应用 CSS 规则。我已经看到可以定义默认值，例如：
background-color: var(--bgColor, red);
但我认为这不会在我的项目中起作用，因为我想要的是，当未定义变量来获取该行在 CSS 中不存在时它将具有的样式时。
我添加了一个代码笔，以便更容易理解我在说什么：
https://codepen.io/xmorell/pen/bGWLoaL
background-color: var(--bgColor, red);
.container {
margin: 5px;
}
.content {
padding: 5px;
display: inline-block;
height: 100px;
width: 100px;
border: 1px solid black;
background-color: var(--bgColor) !important;
}