使用JavaScript获取元素的自定义css属性(-mystyle)

Question

在某些元素具有自定义CSS属性的应用程序中,有没有办法通过JavaScript检索这样的值？

例如

<div id="myDiv" style="color:#f00;-my-custom-property:upsidedown;" />

我可以通过以下两种方法访问color属性:

$('myDiv').style.getPropertyValue("color")
$('myDiv').style.color

但这些不适用于自定义属性.这支持了吗？

Answer 1

浏览器未使用的CSS值将被丢弃,并且无法通过-my-custom-property.但是有两个其他选项:

1.自定义属性

使用HTML5定义的自定义属性.然后,只需检索该属性的值.这是推荐的路线.

HTML .style

2.解析--my-custom-property: 'foobar';属性

检索getComputedStyle(your_el).getPropertyValue("--my-custom-property")属性的值(不是'foobar')并将其解析为名称/值对.然后使用为名称设置的值-my-custom-property.虽然这有效,但它有点像黑客,我不鼓励使用它.

Answer 2

CSS:

:root {
    --custom-property: #000000;
}

使用Javascript:

var custom_property = window.getComputedStyle(document.body).getPropertyValue('--custom-property').trim()

Answer 3

放入style属性或属性中时,将忽略未识别的CSS属性style.cssText.

如果要在特定元素上定义属性,我建议使用数据属性:
HTML:

<div id="myDiv" style="color:#f00;" data-custom-property="upsidedown" />

JavaScript的:

//jQuery's method to retrieve value:
$("#myDiv").data("custom-property");
//jQuery, without parsing:
$("#myDiv").attr("data-custom-property");

// Modern browsers, native JS:
document.getElementById("myDiv").dataset["custom-property"];
// Older browsers, native JS:
document.getElementById("myDiv").getAttribute("data-custom-property");