Question

如果用户从台式计算机访问我的网站，在我的HTML中我会调用这样的CSS样式：

<link rel="stylesheet" type="text/css" href="desktop.css" media="all and (min-device-width:768px)" />

使用普通javascript（无框架）如何将媒体属性从"all and (min-device-width:768px)"更改为"all and (min-width:768px)"？

谢谢！

Answer 1

给它一个id并更改属性值：

<link id="foo" rel="stylesheet" type="text/css" href="desktop.css" media="all and (min-device-width:768px)" />

jQuery部分：

$("#foo").attr("media", "all and (min-width:768px)");

JSBIN

没有jQuery版本

document.querySelector("#foo").setAttribute("media", "all and (min-width:768px)");
// or
document.getElemenyById("foo").setAttribute("media", "all and (min-width:768px)");

Answer 2

如果您无法访问源代码并且无法为link设置ID，则首先您需要按媒体属性过滤链接。然后只需将新属性值设置为filtered：

var links = document.getElementsByTagName('link');
for(var i = 0; i < links.length; i++){
    var link = links[i];
    if(link.getAttribute('media') === 'all and (min-device-width:768px)')
        link.setAttribute('media', 'all and (min-width:768px)');
}

fiddle

Javascript：更改<link rel =“stylesheet”/>媒体属性

2 个答案: