如何使用 jQuery 读取 CSS 内容值？

Question

好吧，这让我很困扰，我相信这很简单，但我遇到了麻烦。

我有一个CSS定义：

.isMobile{content:'No'}

我有 HTML：

<ins class="isMobile"></ins>

我的问题是如何使用 jQuery 将内容值读入 javascript。我已经尝试过，谷歌并再次尝试，我能得到的最接近的是

$("ins.cdo").css( "content" );

返回“”不是未定义的。期望的结果是“是”或“否”。

任何帮助将不胜感激。

Answer 1

CSS

content

属性与

:before

和

:after

伪元素一起使用，不应按照您预期的方式使用。

相反，这听起来像是数据属性的一个很好的用例。以下是您如何使用它们实现预期结果：

首先将

data-content

属性添加到

ins

元素，并为其分配值

"No"

。

<ins class="isMobile" data-content="No"></ins>

然后用jQuery，你可以像这样获取data属性的值

$(".isMobile").data("content");

您还可以像这样更改属性的值

$(".isMovile").data("content", "Yes");

Answer 2

这可以获取 CSS 属性的值。

$("ins.isMobile").css( "content" );

Answer 3

您无法获取内容属性的原因是您的选择器错误，请尝试此操作

$("ins.isMobile").css("content");

Answer 4

我完全同意@douty和给出的答案，你想要的有点奇怪...... 这是一个古老的方法，但如果你真的想这样做，有几种方法可以做到

在这两个方面，YAGNI JQuery

第一个选项的问题：你不会得到级联值，所以让我们使用第二个选项，它更准确。
在你的情况下，如果你输入：

window.getComputedStyle(
          document.querySelector("ins.isMobile")
     ).getPropertyValue("content")

您将获得价值

"No"

在此命令中，

document.querySelector("ins.isMobile")

的 JQuery 值为

$("ins.isMobile")[0]

，获取文档中与查询匹配的第一个元素

如果由于某种原因，您需要一个伪选择器，这就是我们在设置内容时通常所做的，例如你的css看起来像这样

.isMobile:before{content:"no";}

然后

window.getComputedStyle

接受第二个参数，即你的伪元素=>

window.getComputedStyle(
          document.querySelector("ins.isMobile"),
          ":before"
     ).getPropertyValue("content")

您将获得价值

"no"