章节
问答
课签
笔记
评论
占位
占位

屏幕可用高和宽度

1. screen.availWidth 属性返回访问者屏幕的宽度,以像素计,减去界面特性,比如任务栏。

2. screen.availHeight 属性返回访问者屏幕的高度,以像素计,减去界面特性,比如任务栏。

注意:

不同系统的任务栏默认高度不一样,及任务栏的位置可在屏幕上下左右任何位置,所以有可能可用宽度和高度不一样。

我们来获取屏幕的可用高和宽度,代码如下:

<script type="text/javascript">
document.write("可用宽度:" + screen.availWidth);
document.write("可用高度:" + screen.availHeight);
</script>

注意:根据屏幕的不同显示值不同。

 

 

 

任务

使用window.screen对象,完成下面任务,看看你的屏幕可用大小:
补充右边编辑器第9行,输出屏幕可用宽度
补充右边编辑器第10行,输出屏幕可用高度
注意: 大家可以把任务栏的位置和大小改变下,看看获取的值有什么区别。

 

?不会了怎么办

document.write("可用宽度:" + screen.availWidth);

document.write("可用高度:" + screen.availHeight); 

||
1
2
<!DOCTYPE HTML>
<html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
提交
重置代码
||

请验证,完成请求

由于请求次数过多,请先验证,完成再次请求

加群二维码

打开微信扫码自动绑定

您还未绑定服务号

绑定后可得到

  • · 粉丝专属优惠福利
  • · 大咖直播交流干货
  • · 课程更新,问题答复提醒
  • · 账号支付安全提醒

收藏课程后,能更快找到我哦~

使用 Ctrl+D 可将课程添加到书签

邀请您关注公众号
关注后,及时获悉本课程动态

举报

0/150
提交
取消
全部 精华 我要发布

最新回答 / 慕丝9339652
右键任务栏,如果锁定任务栏被勾选了取消勾选后可拉大,任务栏设置中可选择任务栏位于上下左右

最新回答 / k_alvin
方法写了没有触发,在最后调用下timeb就可以了var num = 5;    var timer = null;    function timerb() {        document.getElementById('p1').innerHTML = num + '秒后跳到首页';        num--;        if (!timer) {            timer = setInterval("timerb()", 1000)        }        if (num =...

最新回答 / 慕标216849
<!DOCTYPE html><html> <head>  <title>浏览器对象</title>    <meta http-equiv="Content-Type" content="text/html; charset=gkb"/>    </head> <body>  <!--先编写好网页布局-->  <h1>操作成功</h1><span id="second...

最赞回答 / 匹诺曹012
一个是可用高度,一个是可视高度。

已采纳回答 / 小白加油
宽度是一样的,高度应该不是啊,可用高度没有任务栏吧,仔细检查一下代码。

最新回答 / 爱上慕婉清6262634
这节内容是让你看电脑屏幕大小的

最赞回答 / guipeng
screen:屏幕。这一类取到的是关于屏幕的宽度和距离,与浏览器无关,应该是获取window对象的属性。client:使用区、客户区。指的是客户区,当然是指浏览器区域。offset:偏移。指的是目标甲相对目标乙的距离。scroll:卷轴、卷动。指的是包含滚动条的的属性。inner:内部。指的是内部部分,不含滚动条。avail:可用的。可用区域,不含滚动条,易与inner混淆。window.innerWidth/innerHeight:浏览器可见区域的内宽度、高度(不含浏览器的边框,但包含滚动条)。兼容:i...

已采纳回答 / 太0
document.write("可用宽度:"+screen.availWidth  );document.write("可用高度:"+screen.availHeight  );  仔细检查一遍代码,可能是中英文输入法的原因,我遇到过

最新回答 / 伤害爆炸
任务栏是最下面的一行。。。。

已采纳回答 / 慕粉3801737
上一节浏览器宽高是显示器的全屏分辨率;而这节的可用宽高是去掉屏幕最下面任务栏后的尺寸。当然如果任务栏设置自动隐藏的情况下两者结果是一样的。

已采纳回答 / ererer1
是写完代码后再去改变任务栏大小吗?你可以试试先改变大小然后再去输出试下。我自己刚试了一下,值是会变得。

已采纳回答 / qq_狂客_0
<script type="text/javascript">  function wopen()  {      window.open('http://www.imooc.com','_blank','width=300,height=200,menbar=yes,toolbar=yes')  }</script>function rewh(){     var wh=document.getElementById("txt");     wh.style.width="500...
全部 我要发布
最热 最新
只看我的

本次提问将花费2个积分

你的积分不足,无法发表

为什么扣积分?

本次提问将花费2个积分

继续发表请点击 "确定"

为什么扣积分?

账号登录 验证码登录

遇到问题
忘记密码

代码语言