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

标签 javascript jquery css

使用 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 中完成?

最佳答案

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

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

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

关于javascript - 根据屏幕宽度切换 "a href"文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14559650/

相关文章:

javascript - 带有 AJAX 脚本的 PHP 回显 HTML 元素

ajax - JQuery Ajax 请求

javascript - 幻灯片问题

html - mozilla 中的滚动条

html - 将粘性位置分配给网格中的侧边栏

JavaScript 正则表达式跳过子模式

javascript - 将几个 json 文件合并为一个

javascript - 对象解构 : how to use intermediate nested property

javascript - window.focus(), self.focus() 在 firefox 中不起作用

javascript - 如何避免 jquery 文件之间的冲突