window和document
都是网页中的JavaScript对象。
- window对象:就是这个浏览器的窗口,可以通过window获取宽度、高度、网页跳转
- document对象:可以通过函数获取网页中标签,然后通过js操作标签
代码实战
新建 html 文件 20-window.html
,编写下方程序,运行看看效果吧
<!DOCTYPE html>
<htmllang="en">
<head>
<metacharset="UTF-8">
<metahttp-equiv="X-UA-Compatible"content="IE=edge">
<metaname="viewport"content="width=device-width, initial-scale=1.0">
<title>Window</title>
</head>
<body>
<ahref="./19-alert.html">19-alert</a>
<buttononclick="nav()">跳转</button>
<inputid="myname"/>
<buttononclick="getMyName()">获取内容</button>
<divid="mylight"style="width:50px;height:50px;background-color: black;">灯</div>
<buttononclick="openLight()">开灯</button>
<scripttype="text/javascript">
//alert(window.innerWidth)
//alert(window.innerHeight)
function nav(){
window.location.href ="./19-alert.html"
// window.location.reload();//页面刷新
}
function getMyName(){
let myname = document.getElementById("myname").value
alert(myname)
}
function openLight(){
document.getElementById("mylight").style.backgroundColor="red"
}
</script>
</body>
</html>