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 中完成？

score 1 · Accepted Answer

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

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

请记住将其包装在准备好的文件中！

score 0 · Accepted Answer

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

    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");
    }

score 0 · Accepted Answer

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

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

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

score 0 · Accepted Answer

我想建议使用不同的方法。

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

为什么不尝试媒体查询？

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

这是一个纯 CSS 的解决方案。如果用户决定在页面加载后调整屏幕大小，它会起作用。尝试在此 jsfiddle中调整“结果”框架的大小，并注意链接颜色的变化。

javascript - 根据屏幕宽度切换“a href”的文本

4 回答 4

Related

Reference