我有一个 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
。
最佳答案
您可以使用 :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()
关于javascript - 通过 css 媒体查询获取其内容在运行时设置的元素的文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41933875/