在某些元素具有自定义CSS属性的应用程序中,有没有办法通过JavaScript检索这样的值?
e.g。
<div id="myDiv" style="color:#f00;-my-custom-property:upsidedown;" />
我可以通过以下两种方法访问color属性:
$('myDiv').style.getPropertyValue("color")
$('myDiv').style.color
但这些不适用于自定义属性。这支持了吗?
答案 0 :(得分:11)
浏览器无法理解的CSS值将被丢弃,这解释了-my-custom-property
无法通过.style
获取的原因。
过去,您不得不依赖于使用data attributes存储数据并通过JavaScript自行处理继承。
然而,&#34;自定义属性&#34;,又名&#34; CSS变量&#34;已经被引入标准并由浏览器实现~92% support globally as of 2019-05-09。快速浏览一下,Edge似乎是最后一个主要的浏览器,2017年10月16日版本为16。
基本上,你需要在一个元素上设置一个自定义属性(例如,--my-custom-property: 'foobar';
),并且可以使用getComputedStyle(your_el).getPropertyValue("--my-custom-property")
之类的东西来访问它,这将返回'foobar'
(带领空间)。请注意前导空格和引号。它将完全按照提供的方式返回值。
示例:
console.log(getComputedStyle(document.getElementById("a")).getPropertyValue("--my-custom-property-1"))
console.log(getComputedStyle(document.getElementById("b")).getPropertyValue("--my-custom-property-2"))
&#13;
#b-div { --my-custom-property-2: 'world' }
&#13;
<div style="--my-custom-property-1: 'hello'"><h1 id="a">#a 'hello'</h1></div>
<div id="b-div"><h1 id="b">#b 'world'</h1></div>
&#13;
这里使用一个和两个主要连字符,继承和检索值的不同方法进行了一些测试:
function log(computed, selector, prop, value) {
let method = computed ? "getComputedStyle(el)" : "el.style"
let method_id = computed ? "computed" : "raw"
// Build first level of list (tag name)
let first = document.querySelector("#" + selector)
if (!first) {
first = document.createElement("li")
first.appendChild(document.createTextNode(selector))
first.setAttribute("id", selector)
first.appendChild(document.createElement("ul"))
document.querySelector("ul").appendChild(first)
}
// Build second level of list (method of style retrieval)
let second = document.querySelector("#" + selector + "-" + method_id)
if (!second) {
second = document.createElement("li")
second.appendChild(document.createTextNode(method))
second.setAttribute("id", selector + "-" + method_id)
second.appendChild(document.createElement("ul"))
first.querySelector("ul").appendChild(second)
}
// Build third level of list (property accessed)
let third = document.querySelector("#" + selector + "-prop" + prop)
if (!third) {
third = document.createElement("li")
third.appendChild(document.createTextNode(prop + ": `" + value + "`"))
third.setAttribute("id", "prop" + prop)
second.querySelector("ul").appendChild(third)
if (value === "") {
third.classList.add("bad")
} else {
third.classList.add("good")
}
}
}
// Uses .style
function getStyleAttr(selector, prop) {
let value = document.querySelector(selector).style.getPropertyValue(prop)
log(false, selector, prop, value)
}
// Uses getComputedStyle()
function getStyleComputed(selector, prop) {
let value = getComputedStyle(document.querySelector(selector)).getPropertyValue(prop)
log(true, selector, prop, value)
}
// Loop through each property for each element and output the value
let selectors = ["article", "h1", "p"]
let props = ["--my-custom-property", "-my-custom-property"]
selectors.forEach(function(selector) {
props.forEach(function(prop) {
getStyleAttr(selector, prop)
getStyleComputed(selector, prop)
})
})
&#13;
code {
background: #eee;
padding: .2em;
}
.bad {
color: #800;
}
.good {
color: #080;
}
&#13;
<article class="custom-prop-inheritance" style="--my-custom-property: 'foobar'; -my-custom-property: 'foobar'">
<h1>Title</h1>
<p>Custom properties require two leading hyphens (<code>-my-custom-property</code> <em>never</em> works). Using <code>el.style</code> does not support inheritance. To support both inheritance and custom properties, you must use <code>getComputedStyle(<b>el</b>)</code> along with two leading hyphens on the custom property (eg, <code>--my-custom-property</code>).</p>
</article>
<ul></ul>
&#13;
答案 1 :(得分:11)
CSS:
:root {
--custom-property: #000000;
}
使用Javascript:
var custom_property = window.getComputedStyle(document.body).getPropertyValue('--custom-property').trim()
答案 2 :(得分:7)
当置于style
属性或style.cssText
属性中时,将忽略未识别的CSS属性。
如果您想在特定元素上定义属性,我建议data-attributes:
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");
答案 3 :(得分:2)
现在,对于通过CSS In [11]: p = pd.Panel({"test": test, "test2": test2})
In [12]: p
Out[12]:
<class 'pandas.core.panel.Panel'>
Dimensions: 2 (items) x 2 (major_axis) x 2 (minor_axis)
Items axis: test to test2
Major_axis axis: 0 to 1
Minor_axis axis: 0 to 1
In [13]: p["test"] # a DataFrame
Out[13]:
0 1
0 1 2
1 2 3
标记使用专门的CSS hack的所有浏览器来说,这实际上是可行的。本文介绍了如何执行此操作:
http://www.yearofmoo.com/2015/04/cross-browser-custom-css-properties.html
答案 4 :(得分:1)
function getCustomCssProperty(elementID, propertyName){
var style = document.getElementById(elementID).getAttribute("style");
var entries = style.split(";");
for (var i=0; i<entries.length; i++){
var entry = entries[i].split(":");
if(entry[0] == propertyName){
return entry[1];
}
}
return null;
}
答案 5 :(得分:-1)
您可以使用CSSStyleDeclaration API来做到这一点:
element.style.setProperty('color', 'black')
答案 6 :(得分:-2)
你不能使用data- *属性(html5)? 这至少是有效的,而不是一个奇怪的黑客。