如何用javascript获取自定义css变量的内联样式[duplicate]

sd2nnvve 于 2022-12-15 发布在 Java

关注(0)|答案(3)|浏览(107)

此问题在此处已有答案：

Accessing a CSS custom property (aka CSS variable) through JavaScript（4个答案）
Access CSS variable from javascript [duplicate]（2个答案）
三年前关闭了。
如何从一个元素中获取定制CSS变量的内联样式？
我可以很容易地得到宽度或任何其他传统样式，但当我试图得到一个自定义的内联样式得到一个错误。有没有办法提取这个样式数据？感谢您提前提供的任何帮助。没有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;">

css

来源：https://stackoverflow.com/questions/58735794/how-to-get-the-inline-style-of-a-custom-css-var-with-javascript

3条答案

按热度按时间

7hiiyaii1#

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

赞(0）回复(0）举报 2022-12-15

um6iljoc2#

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

赞(0）回复(0）举报 2022-12-15

ia2d9nvy3#

我做了一个函数来实现这个功能：

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="background:red;--rotation:-45deg;color:white;">
 
</div>

我不知道，但可能有另一种方法来做它与js可用的方法。

赞(0）回复(0）举报 2022-12-15

我来回答

如何用javascript获取自定义css变量的内联样式[duplicate]

3条答案

相关问题

热门标签

最新问答