怎么才能选择性的加载不同的css

weixin_30540607 2018-10-29 04:36:00

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<link rel="stylesheet" type="text/css" href="pc.css" media="screen and (min-width: 800px)" />

<link rel="stylesheet" type="text/css" href="wap.css" media="screen and (min-width:0px) and (max-width: 799px)" />

<title>test</title>

</head>



<body>

test.

</body>

</html>

上面的代码，会根据屏幕大小加载不同的css，我现在想实现，强制加载某个css，有办法解决吗？
比如，我在手机上面，会默认显示<link rel="stylesheet" type="text/css" href="wap.css" media="screen and (min-width:0px) and (max-width: 799px)" /> 这个样式，怎么才能实现，在手机上，让他加载<link rel="stylesheet" type="text/css" href="pc.css" media="screen and (min-width: 800x)" />这个样式，谢谢。。

...全文

255 6 打赏收藏转发到动态举报

写回复

用AI写文章

6 条回复

切换为时间正序

请发表友善的回复…

发表回复

天际的海浪 2018-10-31

打赏
举报

引用 2 楼 weixin_30540607 的回复:

我是想用户可以选择，要不要加载啊，能不能通过网址带参数来解决这个问题啊。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" id="style" />
<script type="text/javascript">
var request = (function (){
	var obj = {};
	var arr = window.location.search.slice(1).split("&");
	for (var i = 0, len = arr.length; i < len; i++) {
		var nv = arr[i].split("=");
		obj[decodeURIComponent(nv[0]).toLowerCase()] = decodeURIComponent(nv[1]);
	}
	return obj;
})();
document.getElementById("style").href = request.style=="wap"?"wap.css":"pc.css";
</script>
<title>test</title>
</head>

<body>
test.
</body>
</html>

xxx.html?style=wap就是引入"wap.css"。否则就是引入"pc.css"

___紫菜 2018-10-31

打赏
举报

引用 4 楼 weixin_30540607 的回复:

[quote=引用 3 楼 u013116426 的回复:]
[quote=引用 2 楼 weixin_30540607 的回复:]
我是想用户可以选择，要不要加载啊，能不能通过网址带参数来解决这个问题啊。

可以的你先获取参数在做判断

function dynamicLoadCss(url) {

        var head = document.getElementsByTagName('head')[0];

        var link = document.createElement('link');

        link.type='text/css';

        link.rel = 'stylesheet';

        link.href = url;

        head.appendChild(link);

    }

[/quote]

球具体代码。
[/quote]
你百度一下获取url参数就有了然后判断参数添加css

weixin_30540607 2018-10-31

打赏
举报

引用 3 楼 u013116426 的回复:

[quote=引用 2 楼 weixin_30540607 的回复:]
我是想用户可以选择，要不要加载啊，能不能通过网址带参数来解决这个问题啊。

可以的你先获取参数在做判断

function dynamicLoadCss(url) {

        var head = document.getElementsByTagName('head')[0];

        var link = document.createElement('link');

        link.type='text/css';

        link.rel = 'stylesheet';

        link.href = url;

        head.appendChild(link);

    }

[/quote]

球具体代码。

weixin_30540607 2018-10-30

打赏
举报

我是想用户可以选择，要不要加载啊，能不能通过网址带参数来解决这个问题啊。

___紫菜 2018-10-30

打赏
举报

引用 2 楼 weixin_30540607 的回复:

我是想用户可以选择，要不要加载啊，能不能通过网址带参数来解决这个问题啊。

可以的你先获取参数在做判断

function dynamicLoadCss(url) {

        var head = document.getElementsByTagName('head')[0];

        var link = document.createElement('link');

        link.type='text/css';

        link.rel = 'stylesheet';

        link.href = url;

        head.appendChild(link);

    }