js获取文本高度和屏幕高度

最新推荐文章于 2024-05-04 14:55:11 发布
最新推荐文章于 2024-05-04 14:55:11 发布
阅读量4.8k 收藏 2
点赞数 2
分类专栏： js 文章标签： 页面高度 屏幕高度

网页可见区域宽： document.body.clientWidth 
网页可见区域高： document.body.clientHeight 
网页可见区域宽： document.body.offsetWidth (包括边线的宽) 
网页可见区域高： document.body.offsetHeight (包括边线的高) 
网页正文全文宽： document.body.scrollWidth 
网页正文全文高： document.body.scrollHeight 
网页被卷去的高： document.body.scrollTop 
网页被卷去的左： document.body.scrollLeft 
网页正文部分上： window.screenTop 
网页正文部分左： window.screenLeft 
屏幕分辨率的高： window.screen.height 
屏幕分辨率的宽： window.screen.width 
屏幕可用工作区高度： window.screen.availHeight 
屏幕可用工作区宽度： window.screen.availWidth 

元素距离网页正文的高度：$( "元素选择器" ).offset().top;

在我本地测试当中： 
在IE、FireFox、Opera下都可以使用 
document.body.clientWidth 
document.body.clientHeight 
即可获得，很简单，很方便。 
而在公司项目当中： 
Opera仍然使用 
document.body.clientWidth 
document.body.clientHeight 
可是IE和FireFox则使用 
document.documentElement.clientWidth 
document.documentElement.clientHeight 
原来是W3C的标准在作怪啊 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

如果在页面中添加这行标记的话 
在IE中： 
document.body.clientWidth ==> BODY对象宽度 
document.body.clientHeight ==> BODY对象高度 
document.documentElement.clientWidth ==> 可见区域宽度 
document.documentElement.clientHeight ==> 可见区域高度 
在FireFox中： 
document.body.clientWidth ==> BODY对象宽度 
document.body.clientHeight ==> BODY对象高度 
document.documentElement.clientWidth ==> 可见区域宽度 
document.documentElement.clientHeight ==> 可见区域高度 
? 
在Opera中： 
document.body.clientWidth ==> 可见区域宽度 
document.body.clientHeight ==> 可见区域高度 
document.documentElement.clientWidth ==> 页面对象宽度（即BODY对象宽度加上Margin宽） 
document.documentElement.clientHeight ==> 页面对象高度（即BODY对象高度加上Margin高） 
而如果没有定义W3C的标准，则 
IE为： 
document.documentElement.clientWidth ==> 0 
document.documentElement.clientHeight ==> 0 
FireFox为： 
document.documentElement.clientWidth ==> 页面对象宽度（即BODY对象宽度加上Margin宽）document.documentElement.clientHeight ==> 页面对象高度（即BODY对象高度加上Margin高） 
Opera为： 
document.documentElement.clientWidth ==> 页面对象宽度（即BODY对象宽度加上Margin宽）document.documentElement.clientHeight ==> 页面对象高度（即BODY对象高度加上Margin高） 
真是一件麻烦事情，其实就开发来看，宁可少一些对象和方法，不使用最新的标准要方便许多啊。 
有时候需要取页面的底部, 就会用到document.body.clientHeight , 在HTML 标准中(这一句就能取到整个页面的高度, 不论body 的实际内容到底有多高, 例如, 1074*768 的分辨率, 页面最大化时, 这个高度约为720 , 即使页面上只有一句”hello world” , 也仍然取到720. 
可是在XHTML中, 如果body 体中只有一行, 则document.body.clientHeight 只能取到那一行的高度, 约20px, 这时如何还想取到整个页面的高度, 就要用document.documentElement.clientHeight 来获取了. 
原因是: 在HTML 中, body 是整个DOM 的根, 而在XHTML 中, document 才是根, body 不再是根, 所以取body 的属性时, 不能再取到整个页面的值. 

区别新旧标准的行是: 
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN” > 
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“> 
前者指明该页面使用旧标准, 后者指明该页面使用新标准. 

weixin_42260706
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
获取给定一段文字的长度和高度
liuhao9999的博客
05-17 529
function getTextWidthAndHeight(str) { var span = document.createElement("span"); span.innerHTML = str; span.style.fontSize = "12px"; span.style.lineHeight = "1em"; span.style.padding = "0px"; span.style.mar..
js获取网页可见区域、正文以及屏幕分辨率的高度
12-11
网页可见区域宽： document.body.clientWidth 网页可见区域高： document.body.clientHeight 网页可见区域宽： document.body.offsetWidth (包括边线的宽) 网页可见区域高： document.body.offsetHeight (包括边线的...
textarea 根据内容自动调整高度
shijianshenchu的博客
04-12 1008
【代码】textarea 根据内容自动调整高度。
JS高级使用3.0——JS中获取页面的高度、距离顶部的距离
最新发布
蓝桉
05-04 926
获取距离顶部的距离可视区高度滚动条总高度滚动页面scroll()scrollTo()scrollBy()
js获取文本的宽度高度
weixin_47813845的博客
12-09 2098
直接上代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <tit
JS动态计算文本高度
weixin_51345674的博客
02-02 3185
通过JS动态计算文本高度 我们在做动态网页APP时有时会需要根据不同的文本高度设置不同的height，这就需要动态计算文本的高度了，之前在网上看到过一个方案，但本人亲自试了一下发现有bug，就是会在页面中多创建一个占位的元素，于是我就将这个bug修复了一下，不废话，上代码。对前端感兴趣的小伙伴可以加我QQ：1627889159。 function textSize (fontSize, fontFamily, text) { var span = document.createElement('span
JS测量文字的宽度px和高度px
qq_34452824的博客
05-07 4801
如果单纯测量文字宽度px，比较常用的方法是使用canvas的context.measureText： function measureUseCanvas(fontSize, fontFamily, text) { var canvas = document.createElement("canvas"); var context = canvas.getContext(...
计算一行文本的高度
weixin_30619101的博客
04-09 105
计算一行文本的高度 说明 有时候我们需要知道指定的几行文本的高度，此工具用于解决此种问题。 源码 // // NSString+LabelWidthAndHeight.h // ZiPeiYi // // Created by YouXianMing on 15/12/9. // Copyright © 2015年 YouXianMing. ...
js获取input长度并根据页面宽度设置其大小及居中对齐
10-25
`JavaScript`提供了多种方法来获取浏览器窗口和文档的大小。以下是一些常用的属性： 1. **获取页面宽度和高度**： - `document.body.clientWidth`: 获取网页可视区域的宽度，不包括滚动条。 - `document.body....
useful-JavaScript-Fragment:前端常用JavaScript片段
07-02
useful-JavaScript-Fragment本项目包含如下内容（还会陆续更新）：注意，目前项目还处于初期阶段，还未进行完整的兼容性测试，欢迎指导和反馈！如果本项目对您有用或者有疑问的地方，请一定告诉我，非常之欢迎！本...
微信小程序清空输入框信息与实现屏幕往上滚动的示例代码
10-15
同时，在JS（JavaScript）中，我们需要监听`bindInputData`事件来获取用户输入，并监听`sendMsg`事件来处理发送操作： ```javascript data: { userInfo: {}, inputvalue: '' }, bindInputData: function(e) { ...
微信小程序实现富文本图片宽度自适应的方法
10-17
在微信小程序中，由于屏幕尺寸和布局的差异，图片在不同设备上可能无法自适应显示，导致图片显示不全或比例失真。为了解决这个问题，开发者需要采取一些策略来确保图片在微信小程序中能够自动调整宽度以适应屏幕。...
js实现多行文字截取
楠姐的博客
12-02 912
css部分 .div { height: 60px; line-height: 20px; overflow: auto; } js部分 let arr = document.getElementById('div') //遍历每个段落，逐个截取 for( i=0; i<arr.length; i++ ) { //获得第i个段落的内容 var str = $(".demo")[i].innerText; //获得第i个段落的可见高
实现自适应屏幕宽高度、超出弹出滚动条
weixin_34132768的博客
10-10 2703
如何实现自适应屏幕宽高度、超出弹出滚动条 　　　　设计网页的过程中，有时需满足不能超出屏幕大小的规则限定，考虑到不停的屏幕有不同的SIZE尺寸。 　　　 这么一来我们就需要让它自己获取screen中的宽高度了。( height width ) 　　情景： 　　　　一般网页内容过多时，右边出现滚动条来进行下滑查看网页内容，当我们一个页面中出现多个模块，页面规定只能显...
js实现textarea根据内容大小自适应高度
大数据-攻城狮
10-12 2209
首先，我们来看看源代码： /** * 文本框根据输入内容自适应高度 * @param                {HTMLElement}        输入框元素 * @param                {Number}                设置光标与输入框保持的距离(默认0) * @param                {Number}              ...
js监听textarea文本域变化使高度自适应
lijunlinlijunlin的专栏
04-13 5189
转载自：http://my.oschina.net/tearlight/blog/191927 在网友Amin的帮助下，找到了一个兼容浏览器的方法（详情 http://dramin.duapp.com/?p=112） 主要是通过判断输入状态的改变，类似于onchange，IE9以上 、firefox、chrome等都支持了Html中的oninput事件，而IE6/7/8则可以通过onpro
css、js（vue）进行textarea自适应高度（超详细说明）
weixin_44784401的博客
05-23 9447
css、js（vue）进行textarea自适应高度（超详细说明）
Js获取字符串的显示宽度/高度
热门推荐
张营的技术博客
11-09 2万+
重点: 1.在H5页面，文字大小单位为rem 2.不同的font-family，文字的宽度不一样 3.文字宽度同时受font-size和font-family影响思路： 在页面动态创建一个节点，设置节点的font-size,font-family,还有内容，然后获取它的宽度。节点宽度必须随内容变化而变化，所以使用display:inline-block 为了避免禅城误差，使用 getComp
js实现超过长度的字符截取指定长度（中文字符算2个字符），超出部分以...显示...
weixin_30672019的博客
12-30 510
//超过长度的字符截取指定长度，超出部分以...显示 function subString(str, len) { var newLength = 0; var newStr = ""; var chineseRegex = /[^\x00-\xff]/g; var si...
vue 获取屏幕高度和宽度
05-18
你可以使用`window.screen`对象来获取屏幕的高度和宽度，如下所示： ```javascript // 获取屏幕宽度 const screenWidth = window.screen.width; // 获取屏幕高度 const screenHeight = window.screen.height; ``` ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值