javascript - 根据屏幕宽度切换 "a href"文本

Question

使用 jQuery/jQueryMobile，我有一个链接如下:

<a href="index.html" id="HomeLink" data-role="button" data-mini="true" data-icon="home" data-iconpos="top" >Home</a>

我正在尝试测试各种屏幕尺寸，如果屏幕宽度小于 300px，我想更改:

data-iconpos="top"

到

data-iconpos="notext"

所以我只得到图标。我试着用 JavaScript 来做:

var hl = document.querySelector('#HomeLink');
if ($(window).width() < 300) {
    hl.setAttribute("data-iconpos", "notext");
} else {
    hl.setAttribute("data-iconpos", "top");
}

但它不会起作用。

问题:可以用CSS代替吗

如果不是:如何在 JavaScript 中完成？

Answer 1

据我所知，您不能真正使用 CSS 设置数据属性，但既然您已经在使用 jQuery，为什么不一直尝试:

$('#HomeLink').data('iconpos', ($(window).width() < 300 ? 'notext' : 'top') );

记得把它包装在准备好的文档中!