获取元素'；使用JavaScript创建自定义css属性（-mystyle）

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

e、 g

---

但这些不适用于自定义属性。是否支持此功能？

将未识别的CSS属性放在

style

属性或

style.cssText

属性中时将被忽略

如果要在特定元素上定义属性，我建议：
HTML:

---

你不能使用数据-*属性（html5）？

---

这至少是有效的，不是一个奇怪的黑客行为。

浏览器无法理解的CSS值被丢弃，这解释了为什么

-我的自定义属性

无法通过

.style

访问

在过去，您必须依靠JavaScript存储数据并自己处理继承

然而，“自定义属性”，也就是“CSS变量”，已经被引入到标准中，并通过浏览器实现。乍一看，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”））

#b-div{--my-custom-property-2:'world'}

“你好” #b“world”函数getCustomCssProperty（elementID，propertyName）{ var style=document.getElementById（elementID）.getAttribute（“样式”）； var entries=style.split（“；”）；

---

对于（var i=0；i而言，现在所有浏览器都可以通过CSS

content

标记使用专门的CSS hack。本文介绍了如何做到这一点：

CSS:

：根目录{
--自定义属性：#000000；
}

Javascript:

var custom_property=window.getComputedStyle（document.body）.getPropertyValue（'--custom property'）.trim（）

您可以使用API执行以下操作：

element.style.setProperty('color', 'black')

---

你用的是什么框架？我现在猜Prototype.js。如果是的话，把它标记为Prototype.js。为了回答你的问题，不存在的CSS属性无法获得，因为它们被忽略了。不，我用的是Prototype。但是我很高兴看到一个jQuery解决方案，如果只是给我一些想法的话。a@RobW说，我很确定浏览器忽略了CSS属性你不明白。这让我想知道，什么应用程序会这样做？如果你只想为你的脚本存储自定义数据，请使用自定义属性（前缀为“data-”），而不是自定义样式属性。例如，

。另外，试着解析element.outerHTML（不确定这是否兼容）。自定义属性（data-*）很好，但不要层叠，这是重点。请参阅。这很好，但如果样式属性的引号中包含分号（例如作为url的一部分），则很容易出错。这不会提供类似于整个要点的层叠。最好是“借用”一个有效的CSS属性，它可以接受任何值并具有可继承的行为。“最好“借用”一个有效的CSS属性，它可以接受任何值并具有可继承的行为”-例如“内容”就可以了。它不应用任何样式，它级联并接受任何值。如果您想允许通过样式表修改自定义元素，这将非常有用。

getComputedStyle（您的元素）[“defined property”]

如果您想获得CSS定义的样式，例如“颜色”和“字体”，那么它可以很好地工作。但是，很高兴知道可以使用以下方法访问自定义属性：

getComputedStyle（your_el）.getPropertyValue（“--my custom property”）

很有趣，但由于这是一种（对某些人来说很复杂的）黑客行为，而且不符合规范，我仍然相信“正确”答案是不要在自定义属性中使用CSS，而是使用data属性。不过提示是+1-学习新的hack总是很好的！：）太棒了。我不知道通过JS访问这些文件的window.getComputedStyle方法！！感谢Milla！这似乎是正确的答案，因为大多数替代方法都需要更改文档（不仅仅是CSS）。但是，值得一提的是，（a）自定义属性名称必须以连字符开头；以及（b）这些值是继承的，这就是为什么您的示例可以从主体中获取根属性。

document.getElementById('myDiv').style.getPropertyValue("color")
document.getElementById('myDiv').style.color

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

//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");

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;

}

element.style.setProperty('color', 'black')