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事件中，例如：

$(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"对我来说有点不合适。我有一种感觉（也许我错了）你试图将你的样式内嵌到HTML中。

为什么不尝试媒体查询？

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

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

建议阅读：

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

警告：请注意，IE低于9，咳咳......

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

4 个答案: