js获取height和width总结

JS获取页面尺寸总结
最新推荐文章于 2021-11-18 17:15:08 发布
最新推荐文章于 2021-11-18 17:15:08 发布
阅读量85 收藏
点赞数
CC 4.0 BY-SA版权
文章标签： javascript xhtml ViewUI
原文链接：https://yq.aliyun.com/articles/323517 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html>  
<head>  
    <title>js获取height和width总结</title>  
    <meta content="text/html;charset=UTF-8" http-equiv="Content-Type"/>  
    <script type="text/javascript" src="js/jquery-1.5.2.js"></script>  
    <script type="text/javascript" >  
       $(document).ready(function()  
        {  
        alert("浏览器当前窗口可视区域高度:"+$(window).height()); //浏览器当前窗口可视区域高度  
        alert("浏览器当前窗口文档的高度:"+$(document).height()); //浏览器当前窗口文档的高度  
        alert("浏览器当前窗口文档body的高度:"+$(document.body).height());//浏览器当前窗口文档body的高度  
        alert("浏览器当前窗口文档body的总高度 包括border padding margin:"+$(document.body).outerHeight(true));//浏览器当前窗口文档body的总高度 包括border padding margin  
        alert("浏览器当前窗口可视区域宽度:"+($(window).width())); //浏览器当前窗口可视区域宽度  
        alert("浏览器当前窗口文档对象宽度:"+$(document).width());//浏览器当前窗口文档对象宽度  
        alert("浏览器当前窗口文档body的高度:"+$(document.body).width());//浏览器当前窗口文档body的高度  
        alert("浏览器当前窗口文档body的总宽度 包括border padding margin:"+$(document.body).outerWidth(true));//浏览器当前窗口文档body的总宽度 包括border padding margin  
        alert("显示器分辨率，只能用JavaScript代码获取高度:"+screen.height);//显示器分辨率，只能用JavaScript代码获取  
        alert("显示器分辨率，只能用JavaScript代码获取宽度:"+screen.width);  
        })  ;  
  
  
    </script>  
  
</head>  
<body>  
    <ul>  
         <li>  网页可见区域宽： document.body.clientWidth    </li>  
         <li>   网页可见区域高： document.body.clientHeight  </li>  
         <li>   网页可见区域宽： document.body.offsetWidth (包括边线的宽)</li>  
         <li>  网页可见区域高： document.body.offsetHeight (包括边线的高)    </li>  
         <li>  网页正文全文宽： document.body.scrollWidth                   </li>  
         <li>   网页正文全文高： document.body.scrollHeight                       </li>  
         <li>    网页被卷去的高： document.body.scrollTop  </li>  
         <li>    网页被卷去的左： document.body.scrollLeft  </li>  
         <li>    网页正文部分上： window.screenTop   </li>  
         <li>    网页正文部分左： window.screenLeft   </li>  
         <li>   屏幕分辨率的高： window.screen.height</li>  
         <li>   屏幕分辨率的宽： window.screen.width  </li>  
         <li>   屏幕可用工作区高度： window.screen.availHeight</li>  
         <li>   屏幕可用工作区宽度： window.screen.availWidth </li>  
     </ul>  
  
</body>  
</html>

 

【获取页面width和height】js、jq判断浏览器窗口的宽度和高度
weixin_48596030的博客
08-23 4352
【获取页面width和height】js、jq判断浏览器窗口的宽度和高度
Canvas中设置width与height的问题浅析
09-22
本文主要探讨了Canvas中设置`width`和`height`属性时可能出现的问题及其解决方案。 首先，Canvas元素在HTML文档中默认的宽度是300像素，高度是150像素。可以通过直接在`<canvas>`标签内设置`width`和`height`属性来...
java 正则表达式 获取img 的width属性并修改它
zfb52572的博客
07-18 1916
String html ="<img width=100' height='30' src='aa.jpg'/>"; //这里是修改width的属性为100% html = html.replaceAll("(<img[^>]*?)\\s+width\\s*=\\s*\\S+","$1 width=100%"); ...
html之给文本框设置宽度和高度
qq_44894359的博客
04-11 8457
html之给文本框设置宽度和高度
js获取height和width的方法说明
10-27
在JavaScript中，获取元素的高度（height）和宽度（width）是网页动态布局和交互的关键部分。以下是一些常用的方法来获取这些属性值： 1. **jQuery 方法**： - `$(window).height()`：返回浏览器当前窗口可视区域...
CSS中height和width在IE和其他浏览器中的区别图文详解
09-25
这种差异可能导致在不同浏览器中，通过JavaScript或者其他方式获取元素的`width`或`height`时，得到的数值不一致。例如，如果你使用`element.offsetWidth`或`element.offsetHeight`，在IE8中会得到包含边框和内填充...
js各种宽高的总结
chaofei_liang的博客
09-09 294
1.clientWidth和clientHeight 指元素的可视部分宽度和高度，就是padding+content 如果没有滚动条，就是设定的宽度和高度  如果有滚动条，就是设定的宽度和高度减去滚动条的宽度和高度 body{ border:20px solid #ccc; margin:10px; padding:40px; background:#eee; height:35
html img 元素 读取width 的问题
xiongzhengxiang的专栏
05-21 1203
当img 的display 属性为：none 时，通过imgTar .width 始终得到0，而display :block时，能正确得到width
设置html 输入框控件text的自定义长度宽度和字体的大小
热门推荐
cddchina的专栏
07-15 5万+
js正则表达式去除富文本中img标签的width、height、style宽高等属性
NSX-Truth
12-21 4299
<view class="content"> <rich-text :nodes="replaceSpecialChar(news.detail)"></rich-text> </view> methods: { init() { this.$u.api.getDetailById({ id: this.id }).then(res => { this.news = res.data; })
Js公共函数------获取目标元素的高度height
Sestid的博客
11-13 554
废话不多说，直接上代码 /** * getElementHeight * * @description 获得目标元素height * @param {target} 目标元素 * @return {string} * */ const getElementHeight = element => { if (element) { return Math.max( element.scrollHeight, element.offsetHeight,
js 正则去除html代码里 img标签里的style,添加图片自适应值width
晓风揽月
02-25 8225
js正则去除一段html里 img标签里的style，添加图片自适应 max-width:100% convert () { let htmlText = '&lt;img style="border: 0px; width: 537px; display: block;"&gt;' let str = htmlText.replace(/&lt;img[^&gt;]*&gt;/gi,...
js获取元素width和height
weixin_40216358的博客
11-18 2261
getBoundingClientRect：该方法返回元素的大小及其相对于视口的位置 语法：Element.getBoundingClientRect() 使用： 获取宽度：Element.getBoundingClientRect().width 获取高度：Element.getBoundingClientRect().height 范围：content+padding+border 是否支持小数点：支持 getComputedStyle：方法返回一个对象，该对象在应用活动样式表并解析.
$(window).height()获取到的高度不对
wuyou1336的博客
02-20 1万+
关于这个问题，网上有人说这是webkit内核的浏览器导致的，且只有这种浏览器会出现，只需要将html5的声明整成标准的带有的声明的就行了，但是本人亲测仍然是不行的，所用浏览器：Google Chrome  (64-bit)。 后来使用 var innerHeight = window.innerHeight; //window的高度，即手机的高度 var cli
js 获取webview width height
最新发布
04-11
<think>好的，用户想知道如何使用JavaScript获取WebView的宽度和高度。首先，我需要回顾一下相关的知识。 根据引用内容，用户提到了在Android WebView中启用JavaScript支持，以及在页面加载完成后调用JS方法的重要性。比如引用[2]指出，JS代码必须在页面加载完成后调用，比如在onPageFinished回调中执行。此外，引用[3]和[5]提到了使用JavaScript获取窗口的宽度和高度的具体方法，比如document.documentElement.clientWidth和clientHeight。还有在鸿蒙系统中WebView的交互方式，可能涉及类似的原理。 所以，用户的问题可能是在WebView中，通过JavaScript代码获取当前视图的尺寸。需要分步骤考虑：首先在WebView设置中启用JavaScript，确保可以执行JS；然后在页面加载完成后注入JS代码，或者让页面自身的JS代码在合适的时机获取这些值。同时，可能需要通过WebView的接口将获取到的尺寸传递回原生代码，比如通过addJavascriptInterface或者loadUrl的方式。 另外，引用[5]提到在初始化时可能无法获取到DOM的尺寸，但可以通过指定高宽或延迟获取。因此，在WebView中可能需要等待页面加载完成后再执行JS代码，以确保元素已经渲染完毕，能够正确获取到尺寸。 总结下来，步骤应该是：1. 确保WebView启用JavaScript；2. 在页面加载完成后执行JS代码；3. 使用document.documentElement.clientWidth和clientHeight来获取宽高；4. 可能需要将结果传回原生应用。同时需要注意不同平台（Android、HarmonyOS）的差异，但核心的JS方法应该是通用的。</think>在WebView中通过JavaScript获取宽度和高度，需结合原生代码和JS交互实现。具体步骤如下： --- ### 方法1：通过JS直接获取DOM尺寸 1. **启用WebView的JavaScript支持**（以Android为例）： ```java WebSettings settings = webView.getSettings(); settings.setJavaScriptEnabled(true); //允许执行JS脚本[^1] ``` 2. **在页面加载完成后注入JS代码**： ```java webView.setWebViewClient(new WebViewClient() { @Override public void onPageFinished(WebView view, String url) { //页面加载完成后执行JS webView.loadUrl("javascript:window.JsBridge.onGetSize(" + "document.documentElement.clientWidth," + "document.documentElement.clientHeight)"); //获取可视区域尺寸[^3][^5] } }); ``` 3. **JS回调原生接口**（需提前注册JS桥接对象）： ```java public class JsBridge { @JavascriptInterface public void onGetSize(int width, int height) { Log.d("WebViewSize", "Width: " + width + ", Height: " + height); } } webView.addJavascriptInterface(new JsBridge(), "JsBridge"); //注册JS桥接对象 ``` --- ### 方法2：通过Echarts初始化参数获取（适用于图表场景） 若使用Echarts等可视化库，可在初始化时直接传递尺寸参数[^5]： ```javascript //在WebView加载的页面中 const chart = echarts.init(document.getElementById('chart'), null, { width: document.documentElement.clientWidth, height: document.documentElement.clientHeight }); ``` --- ### 关键注意事项 1. **执行时机**：必须等待`onPageFinished`或DOM加载完成后再获取尺寸，否则可能得到0值[^2] 2. **鸿蒙系统实现**：通过`WebAgent`拦截URL实现类似交互逻辑[^4] 3. **动态尺寸**：监听窗口变化时需添加`resize`事件： ```javascript window.addEventListener('resize', () => { const newWidth = document.documentElement.clientWidth; const newHeight = document.documentElement.clientHeight; }); ``` ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值