Mar*_*rcZ 31 javascript css jquery css-variables
如何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>
CMe*_*ina 43
你可以使用document.body.style.setProperty('--name', value);:
var bodyStyles = window.getComputedStyle(document.body);
var fooBar = bodyStyles.getPropertyValue('--foo-bar'); //get
document.body.style.setProperty('--foo-bar', newValue);//set
更多信息在这里.
col*_*lxi 11
获取/设置CSS3变量的标准方法是.setProperty()和.getPropertyValue().
如果您的变量是Globals(声明为:root),则可以使用以下内容来获取和设置它们的值.
// setter
document.documentElement.style.setProperty('--myVariable', 'blue');
// getter
document.documentElement.style.getPropertyValue('--myVariable');
但是,getter只会返回var的值,如果已设置,则使用.setProperty().如果已通过CSS声明设置,将返回undefined.在这个例子中检查它:
let c = document.documentElement.style.getPropertyValue('--myVariable');
alert('The value of --myVariable is : ' + (c?c:'undefined'));:root{ --myVariable : red; }
div{ background-color: var(--myVariable); } <div>Red background set by --myVariable</div>为了避免这种意外行为,您必须getComputedStyle()在调用之前使用该方法.getPropertyValue().然后吸气者看起来像这样:
getComputedStyle(document.documentElement,null).getPropertyValue('--myVariable');
在我看来,访问CSS变量应该更简单,快速,直观和自然......
我已经实现CSSGlobalVariables了一个小的(<3kb)javascript助手,它会自动检测并打包到一个Object,文档中所有活动的CSS全局变量,以便于访问和操作.
// get the document CSS global vars
let cssVar = new CSSGlobalVariables();
// set a new value to --myVariable
cssVar.myVariable = 'red';
// get the value of --myVariable
console.log( cssVar.myVariable );
应用于Object属性的任何更改都会自动转换为CSS变量.
可在:https://github.com/colxi/css-global-variables
以下示例说明了如何使用 JavaScript 或 jQuery 更改背景，并利用自定义 CSS 属性（也称为 CSS 变量）（在此处了解更多信息）。额外奖励：该代码还说明了如何使用 CSS 变量来更改字体颜色。
function plain_js() {
// need DOM to set --mycolor to a different color
d.body.style.setProperty('--mycolor', 'red');
// get the CSS variable ...
bodyStyles = window.getComputedStyle(document.body);
fontcolor = bodyStyles.getPropertyValue('--font-color'); //get
// ... reset body element to custom property's new value
d.body.style.color = fontcolor;
d.g("para").style["font-weight"] = "bold";
this.style.display="none";
};
function jQuery_() {
$("body").get(0).style.setProperty('--mycolor','#f3f');
$("body").css("color",fontcolor);
$("#para").css("fontWeight","bold");
$(this).css("display","none");
}
var bodyStyles = null;
var fontcolor = "";
var d = document;
d.g = d.getElementById;
d.g("red").addEventListener("click",plain_js);
d.g("pink").addEventListener("click",jQuery_);:root {
--font-color:white;
--mycolor:yellow;
}
body {
background-color: var(--mycolor);
color:#090;
}
#para {
font: 90% Arial,Helvetica;
font-weight:normal;
}
#red {
background:red;
}
#pink {
background:#f3f;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<p id="para">Let's try to make the background red or pink and change the text to white and bold.</p>
<button id="red">Red</button>
<button id="pink">Pink</button>请注意，使用 jQuery，为了将自定义属性设置为不同的值，此响应实际上包含答案。它使用 body 元素的get()方法，该方法允许访问底层 DOM 结构并返回 body 元素，从而方便代码将自定义属性设置--mycolor为新值。