根据屏幕宽度切换“ 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') );

请记住将其包装在文档中！

Answer 2

您可以通过这种方式更改代码：

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

与.attr() ：

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

Answer 3

尝试将代码包装在窗口调整大小事件中，例如：

$(window).resize(function () {
check();
})
$(function () {
check();
})

function check() {
if ($(window).width() < 300) {
    $('#HomeLink').attr('data-iconpos', 'notext');
} else {
    $('#HomeLink').attr('data-iconpos', 'top');
}
}

Answer 4

我建议使用其他方法。

在这里， data-iconpos="top"在我看来有点data-iconpos="top" 。 我有一种感觉（也许是错的），您正在尝试将样式内联到HTML中。

为什么不尝试媒体查询？

@media screen and (max-width: 300px) {
    #HomeLink {
        /* styling for HomeLink when screen width is less than 300px */
    }
}

这是仅CSS的解决方案。 如果用户决定在页面加载后调整屏幕大小，则此方法有效。 尝试调整此jsfiddle中 “结果”框架的大小，并注意链接颜色的变化。

建议阅读：

• http://alistapart.com/article/sensitive-web-design
• https://developer.mozilla.org/zh-CN/docs/CSS/Media_queries

以下是有关媒体查询的文档： http : //www.w3.org/TR/css3-mediaqueries/

警告 ：请记住，IE低于9，...