有没有办法使用 JQuery 从 css 类中获取类定义或值？答案

【问题标题】：Is there a way to get the class definition or a value from a css class using JQuery?有没有办法使用 JQuery 从 css 类中获取类定义或值？
【发布时间】：2020-04-16 23:44:52
【问题描述】：

给定以下 CSS：

.myClass1 {
    width: 50px;
}
.myClass2 {
    width: 150px;
}

还有以下 HTML：

...
<div id="myDiv">...</div>
...

有没有办法在不引用元素本身的情况下确定类内部的值？

JQuery.someFunc(".myClass1").width()

或者我是否必须将类分配给元素，然后像这样检查实际的属性值：

function CheckClassWidthValue() {
    var $myDiv = $("#myDiv");

    $myDiv.removeClass();
    $myDiv.addClass("myClass1");
    var class1Width = $myDiv.width();

    $myDiv.removeClass();
    $myDiv.addClass("myClass2");
    var class2Width = $myDiv.width();
}

如果我可以直接从 CSS 类名中提取值，我正在编写的代码会更简洁。最好避免定位 CSS 元素，解析代码。

谢谢！

【问题讨论】：

鉴于 css 规则（通常）不应该是动态的，您应该已经知道 css 规则的组成是什么。
您显示的两个类都有无效的声明。您只能在零长度上省略单位（并且应该）。
stackoverflow.com/questions/324486/… 我会看看这个问题。这不是一个 jQuery 答案，但它会给你更多的洞察力，也许是一个解决方案。
这能回答你的问题吗？ Can jQuery get all CSS styles associated with an element?
我想问你为什么觉得有必要这样做？通常，这种方法是代码异味，表明存在更大的问题

标签： jquery html css dhtml

【解决方案1】：

假设页面只有一个样式表（索引0），这很简单。像这样走：

function getStyleDeclaration(selector, property) {
  return [...document.styleSheets[0].cssRules].filter(
    rule => rule.selectorText === selector
  )[0].style[property];
}

function getStyleDeclarations(selector) {
  const declarations = [...document.styleSheets[0].cssRules].filter(
    rule => rule.selectorText === selector
  )[0].style;
  return Object.keys(declarations).reduce((acc, val) => {
    return { ...acc,
      [declarations[val]]: declarations[declarations[val]]
    }
  }, {});
}

console.log(getStyleDeclaration('.myClass1', 'width'));
console.log(getStyleDeclaration('.myClass2', 'color'));
console.log(getStyleDeclarations('.myClass2'));

.myClass1 {
  width: 50px;
}

.myClass2 {
  color: rgb(242, 242, 248);
  height: 100vh;
  width: 150em;
}

【讨论】：