根据网页宽度给BODY加不同的类名

最新推荐文章于 2023-07-19 20:32:29 发布

原创最新推荐文章于 2023-07-19 20:32:29 发布 · 1.5k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#js #javascript

javascript 同时被 2 个专栏收录

37 篇文章

订阅专栏

28 篇文章

订阅专栏

<pre name="code" class="html"><!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.box{
			background: green;
			height: 200px;
		}
		.s1 .box{
			width: 900px;
		}
	</style>
</head>
<body>
	<script>
			(function() {
				var oBody, aWidths = [],
					sOldClass = 0,
					events = [];
				function resize(widths) {
					widths && (aWidths = widths, window.addEventListener ? window.addEventListener("resize", handle) : window.attachEvent && window.attachEvent("onresize", handle));
					var iWidth = document.documentElement ? document.documentElement.clientWidth : document.body.clientWidth;
					var len = aWidths.length;
					if (len == 1){
						if (iWidth < aWidths[0]) setBodyClass(1);
						else if (iWidth > aWidths[len - 1]) setBodyClass(len + 1);
					}
					else{
						for (var i = 0; i < len; i++){
							if (iWidth >= aWidths[i] && iWidth < aWidths[i + 1]) {
								setBodyClass(i + 2);
								break
							}
						}
					}
				}
				function handle() {
					resize();
					for (var len = events.length, i = 0; i < len; i++){
						events[i]();
					} 
				}
				function setBodyClass(sNewClass) {
					if (sOldClass != sNewClass) {
						var oBody = document.body || document.getElementsByTagName("body");
						var sBodyClass = oBody.className,
							sBodyClass = /s[1-9]/.exec(sBodyClass) ? sBodyClass.replace(/s[1-9]/, "s" + sNewClass) : sBodyClass + (("" == sBodyClass ? "" : " ") + "s" + sNewClass);
						oBody.className = sBodyClass;
						sOldClass = sNewClass
					}
				};
				window.setPageStyle = resize;
				window.getPageStyle = function() {
					return sOldClass
				};
				window.onPageStyleChange = function(fn) {
					events.push(fn)
				};
			})();
			setPageStyle([1180]);
			onPageStyleChange(function(){
				console.log(getPageStyle());
			})

	</script>
	<div class="box"></div>
	<div class="update-box">
		<div class="hd">
			<h2 class="title">亲，你的浏览器已经OUT了!</h2>
			<h3 class="sub-title">
				浏览器版本过低，导致了网站部分功能无法正常显示，建议升级为:
			</h3>
			<i class="close"></i>
		</div>
		<div class="bd">
			<ul class="browser-list">
				<li><a href="http://go.microsoft.com/fwlink/?LinkId=324628">IE</a></li>
				<li><a href="http://www.google.cn/chrome/browser/desktop/index.html">chrome</a></li>
			</ul>
			
		</div>
	</div>
</body>
</html>