javascript - 通过 css 媒体查询获取其内容在运行时设置的元素的文本

Question

我有一个 html span 元素如下:

<span id="display-name" data-name="test123" data-sname="test"></span>

其内容由 css media query 根据设备宽度设置。

@media screen and (min-width: 320px) {
  #display-name:after {
    content: attr(data-name)
  }
}
@media screen and (max-width: 320px) {
  #display-name:after {
    content: attr(data-sname)
  }
}

稍后我想使用 javascript 阅读文本，如下所示:

jQuery(document).ready(function () {
  var name = $("#display-name").text();
  alert(name);
});

但该值似乎未由 css 设置。有什么帮助吗？

完整示例在这里:http://codepen.io/anon/pen/vgpxwX

更新

此处发布的解决方案:Get Before-Content of CSS with jQuery

正在提供一个值 attr(data-name)，但不是我需要的值 test123。

修改后的代码笔:http://codepen.io/anon/pen/vgpxwX

Answer 1

您可以使用 :visible选择器以获取可见的元素。

<span id="display-name">
    <span class="name">test123</span>
    <span class="sname">test</span>
</span>

其内容由基于设备宽度的 css 媒体查询设置。

@media screen and (min-width: 320px) {
  #display-name .name {
    display: inline;
  }
  #display-name .sname {
    display: none;
  }
}
@media screen and (max-width: 320px) {
  #display-name .name {
    display: none;
  }
  #display-name .sname {
    display: inline;
  }
}

和 jQuery

$('#display-name span:visible').text()