如何使用javascript获取自定义css var的内联样式[重复]答案

【问题标题】：How to get the inline style of a custom css var with javascript [duplicate]如何使用javascript获取自定义css var的内联样式[重复]
【发布时间】：2020-03-03 06:29:17
【问题描述】：

如何从元素中获取自定义 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;">

【问题讨论】：

您可能必须获取transform 属性的值并解析出该值
我试试谢谢
请注意，内联样式总是比外部样式更具体，因此您的问题可以简单地是如何读取自定义属性的值，答案比您在这里得到的更容易.一个简单的computedStyle，你就明白了
谢谢@TemaniAfif，如果你是对的，我找到了一个更好的解决方案，你在顶部发布的链接.. var styleRotation = document.getElementById('myId').style.getPropertyValue('--旋转');

标签： javascript html css inline-styles

【解决方案1】：

您可以通过解析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/

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案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 可用方法。

【讨论】：