首页 > web前端 > js教程 > 正文

JavaScript中innerWidth和innerHeight属性详解

藏色散人
发布: 2019-03-27 14:41:13
原创
4523人浏览过

JavaScript中的innerWidth属性返回宽度,innerHeight属性返回窗口内容区域的高度。

语法:

window.innerWidth
window.innerHeight
登录后复制

参数:它不需要任何参数。

返回值:返回一个数字,表示窗口内容区域的宽度和高度。

立即学习Java免费学习笔记(深入)”;

注意:对于IE 8 ie(Internet Edg 8)或更早版本,请使用clientWidth和clientHeight获取窗口的宽度和高度。

示例:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>浏览器内部的宽度和高度</title>
    <style>
        body{
            text-align:center;
        }
        .gfg {
            font-size:40px;
            font-weight:bold;
            color:green;
        }
    </style>
</head>
<body>
<div class = "gfg">PHP中文网</div>
<h2>浏览器窗口</h2>
<p id="demo"></p>
<script>
    var Width, Height, result;

    // 浏览器窗口的高度和宽度
    Width = window.innerWidth || document.documentElement.clientWidth
        || document.body.clientWidth;

    Height = window.innerHeight || document.documentElement.clientHeight
        || document.body.clientHeight;
    // 显示宽度和高度。
    result = document.getElementById("demo");
    result.innerHTML = "浏览器内部宽度: " + Width +
        "<br>浏览器内部高度: " + Height;

</script>
</body>
</html>
登录后复制

输出:

09954caece181f0b7f7322afc6258ab.png

相关推荐:《javascript教程

本篇文章就是关于JavaScript中Window innerWidth和innerHeight属性的相关介绍,希望对需要的朋友有所帮助!

以上就是JavaScript中innerWidth和innerHeight属性详解的详细内容,更多请关注php中文网其它相关文章!

java速学教程(入门到精通)
java速学教程(入门到精通)

java怎么学习?java怎么入门?java在哪学?java怎么学才快?不用担心,这里为大家提供了java速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
开源免费商场系统广告
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号