<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>
根据网页宽度给BODY加不同的类名
最新推荐文章于 2023-07-19 20:32:29 发布