HTML——JS—窗口对象window

最新推荐文章于 2021-06-09 16:10:13 发布

Jhinhua

最新推荐文章于 2021-06-09 16:10:13 发布

阅读量228

点赞数

分类专栏： Web前端

本文链接：https://blog.csdn.net/piduocheng0577/article/details/104921561

版权

Web前端专栏收录该内容

72 篇文章 2 订阅

订阅专栏

窗口对象 window
常用方法

窗口对象 window

BOM - Browser Object Model浏览器对象模型	
	窗口对象 window
		提供的是与浏览器进行交互的属性和方法
		window对象常用的属性和行为
			属性：
				document --- 文档对象
				history -- 历史记录对象
				location -- 网址信息对象
			行为：
				alert弹框
				prompt 包含输入框的弹框
				confirm 包含确认取消按钮的弹框
				打开并创建一个新的窗口 open
				定时器
				延时器
		在JS中声明的变量和行为 如果没有标记属于哪个对象，那么它就属于window对象的

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
			var person = {
				name:"Tom"
			}
			console.log(person.name)
			
			var value = 100
			console.log(value) // window对象是可以省略的
			console.log(window.value)
			
			// alert("弹窗")
			// window.alert("弹窗2")
			
			// 为了适配所有的浏览器
			var width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth
			var height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
			
			console.log("屏幕宽度：" + width + " 屏幕高度：" + height)
			
		</script>
	</body>
</html>

常用方法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<button type="button" class="btn">隐藏图片</button>
		<div><img class="cat" src="../img/cat.jpg" width="200px" alt=""></div>
		
		<a href="https://www.w3school.com.cn" target="baidu">验证新窗口的名字</a>
		
		<script>
			//弹窗的 alert  prompt
			// 带有确认取消按钮的
			// var res = confirm("确认删除吗？？？")
			// console.log(res)
			/**
			 * 点击确定取消的话会返回对应的结果
			 * 确定 --- true
			 * 取消 --- false
			 */
			
			var btn_node = document.querySelector(".btn")
			var img_node = document.querySelector(".cat")
			
			// 点击按钮  --- 执行行为
			// 事件的绑定  ---- 当你点击了按钮 就是触发了这个事件 会自动执行的
			btn_node.onclick = function(){
				var res = confirm("确认要隐藏吗？？？")
				if(res){
					// 点击了确认键
					img_node.style.display = "none"
				}
			}
			
			// open 打开并创建一个新的窗口
			/**
			 * 窗口中显示的网址
			 * 自定义名字
			 * 设置新窗口的属性
			 * 		width height left  top
			 */
			// var new_win = open("https://www.baidu.com")
			//var new_win = open("https://www.baidu.com", "baidu")
			//var new_win = open("https://www.baidu.com", "baidu","width=300, height=500, left=100, top=150")
			
		</script>
	</body>
</html>

Jhinhua

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML——JS—窗口对象window

目录窗口对象 window 常用方法窗口对象 window BOM - Browser Object Model浏览器对象模型窗口对象 window 提供的是与浏览器进行交互的属性和方法 window对象常用的属性和行为属性： document --- 文档对象 history -- 历史记录对象 location -- 网址信...
复制链接

扫一扫