timg.jpg
clientWidth
- 可见内容区域的宽度(不包括边框)
- clientWidth： width + padding 不包含border
-
区别offsetWidth和scrollWidth
- offsetWidth: width + padding + border
- scrollWidth: 大小是内容的大小 ，比如div里面有文字，就是文字占的宽度或者高度
可视区域的检测
- ie9及其以上的版本 使用：window.innerWidth
- 标准模式：document.documentElement.clientWidth
- 怪异模式:document.body.clientWidth
//封装
<script type="text/javascript">
function client() {
if (window.innerWidth != null){
return {
width:window.innerWidth,
height:window.innerHeight
}
} else if (window.compatMode == "CSS1Compat"){
return {
width:document.documentElement.clientWidth,
height:document.documentElement.clientHeight
}
}
return {
width:document.body.clientWidth,
height:document.body.clientHeight
}
}
</script>
window.onresize 改变窗口事件
- 窗口或框架被调整大小时调用
-scroll家族中的 window.onscroll是滚动时调用
<script type="text/javascript">
//函数 值调用一次
reSize();
window.onresize = reSize; // 不带括号，只要屏幕出发，就调用，是一个 函数体
function reSize() {
var clientWidth = client().width;
if (clientWidth > 960){
document.body.style.backgroundColor = "red";
} else if(clientWidth > 640){
document.body.style.backgroundColor = "green";
}else{
document.body.style.backgroundColor = "pink";
}
}
function client() {
if (window.innerWidth != null){
return {
width:window.innerWidth,
height:window.innerHeight
}
} else if (window.compatMode == "CSS1Compat"){
return {
width:document.documentElement.clientWidth,
height:document.documentElement.clientHeight
}
}
return {
width:document.body.clientWidth,
height:document.body.clientHeight
}
}
</script>
-
window.screen.width 返回的是我们电脑的 分辨率
-
判断是否是当前对象
- event.target.id 火狐或者谷歌
- event.srcElement.id ie 678
-
当鼠标点击时 触发的对象就可以用上述的方法获取
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>06-点击空白处隐藏</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body {
height: 2000px;
}
#box {
width: 100%;
height: 100%;
opacity: 0.4;
filter: alpha(opacity = 40); /* ie 6 半透明*/
background-color: black;
position: fixed;
top: 0;
left: 0;
display: none;
}
#logo {
width: 300px;
height: 300px;
background-color: #ffffff;
position: fixed;
left: 50%;
top: 50%;
margin-left: -150px;
margin-top: -150px;
display: none;
}
</style>
</head>
<body>
<a href="javascript:;" id="login">注册</a>
<a href="javascript:;">登录</a>
<div id="box" ></div>
<div id="logo"></div>
</body>
</html>
<script type="text/javascript">
function $(id) {
return document.getElementById(id);
}
var box = $("box");
var login = $("login");
var logo = $("logo");
login.onclick = function (event) {
//点击隐藏滚动条
document.body.style.overflow = "hidden";
box.style.display = "block";
logo.style.display = "block";
var event = event || window.event;
if (event && event.stopPropagation){
event.stopPropagation();
} else {
event.cancelBubble = true;
}
}
document.onclick = function (event) {
var event = event || window.event;
var targetId = event.target ? event.target.id : event.srcElement.id;
if (targetId != "logo"){
box.style.display = "none";
logo.style.display = "none";
}
}
</script>
110.gif
网友评论