如何使用 javascript 获取自定义 css var 的内联样式

Question

如何从元素中获取自定义 CSS var 的内联样式？
我可以轻松获取宽度或任何其他传统样式，但在尝试获取自定义内联样式时出现错误。有没有办法提取这种样式数据？预先感谢您提供的任何帮助。没有 jQuery 请。

var styleDivWidth = document.getElementById('myId').style.width;
console.log(styleDivWidth);

/*
var styleDivRotation = document.getElementById('myId').style.--rotation;
console.log(styleDivRotation);
*/

.myClass{
background-color:red;
float:left; 
--rotation: 45deg;
transform: rotate(var(--rotation));
margin:20px;  
}

<div id="myId" class="myClass" style="width:100px; height:100px;
 --rotation:-45deg;">

Answer 1

var rotation = document.getElementById("myId").style.cssText.split("--rotation:")[1];
rotation = rotation.substring(0, rotation.length - 1);
console.log(rotation);

Answer 2

您可以通过解析 cssText 属性.

来提取它

下面是一些代码和 JsFiddle：

const cssText = document.getElementById('myId').style.cssText;
console.log(cssText);
const rotationProp = cssText.split("; ").find(style => style.includes("rotation"));
console.log(rotationProp);

const rotationValue =  rotationProp.slice(rotationProp.indexOf(":") + 1, rotationProp.indexOf(";"));
console.log(rotationValue);

JsFiddle: https://jsfiddle.net/2ajp1cug/

Answer 3

我创建了一个函数来完成它：

function getAttributeValueFromStyles(stylesText, attributeName){
   var attrParts = stylesText.split(';');
   var attrIndex = attrParts.findIndex(function(part){
    return part.split(':')[0] === attributeName;
   });
   return attrParts[attrIndex].split(':')[1];
}
const element = document.querySelector('#test');
const style = element.getAttribute("style");
var attrValue = getAttributeValueFromStyles(style, "--rotation");
console.log(attrValue);

<div id="test" style="backgroud:red;--rotation:-45deg;color:white;">
 
</div>

我不知道，但可能有另一种方法可以使用 js 可用方法来完成。

如何使用 javascript 获取自定义 css var 的内联样式

How to get the inline style of a custom css var with javascript

html

javascript

css

inline-styles