关于使用javascript让层居中的问题document.documentElement.clientHeight和document.documentElement.clientWidth

最新推荐文章于 2022-06-26 08:23:32 发布
最新推荐文章于 2022-06-26 08:23:32 发布
阅读量2.1k 收藏 1
点赞数
分类专栏： html前端开发 文章标签： javascript xhtml 浏览器 function import div
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ZCOK_YSPA/article/details/7795963
版权

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
    <title>My JSP 'MyJsp.jsp' starting page</title>
 <script type="text/javascript">
      function s1(){
       document.getElementById("divcenter").style.top=(document.documentElement.scrollTop+(document.documentElement.clientHeight-document.getElementById("divcenter").offsetHeight)/2)+"px";
       document.getElementById("divcenter").style.left=(document.documentElement.scrollLeft+(document.documentElement.clientWidth-document.getElementById("divcenter").offsetWidth)/2)+"px";
      }
      window.οnscrοll=s1;
      window.οnresize=s1;
      window.οnlοad=s1;
 </script>
  </head>
 
  <body>
    <div id="divcenter" style="width: 300px;height: 200px;background-color:gray;border: 2px solid red;z-index:1000;position: absolute;">
    <div style="z-index: 999;height: 1000px;"></div>
    </div>
  </body>
</html>

//当使用document.documentElement.clientHeight和document.documentElement.clientWidth得到浏览器的可见高和宽的时候要是不加上上面加粗的红色字的话是得不到这两个的值的

//这个例子是让层居中，不管浏览器变大变小，这个层总是居中

CC@Zero
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
网页宽高clientWidth、offsetWidth、offsetTop 、offsetLeft宽高解析
林中明月间丶
05-18 3668
offsetLeft[Top]:只读 属性 当前元素到定位父级的距离（偏移值）到当前元素offsetLeft的距离 style.width:样式宽 clientWidth:样式宽+padding(可视区宽)（如果有滚动条还要包括滚动条的宽度） offsetWidth:样式宽+padding(可视区宽)+border(边框)、(不包括margin) scrollWidt......
JS：document.documentElement对象的clientWidth、offsetWidth、scrollWidth、clientLeft、offsetLeft、scrollLeft
热门推荐
鬼眼邪神
05-10 2万+
document.documentElement.clientWidth 获取浏览器窗口文档显示区域的宽度，不包括滚动条。 document.documentElement.clientHeight 获取浏览器窗口文档显示区域的高度，不包括滚动条。 浏览器兼容性 所有浏览器解释都一样。 document.documentElement.offsetWidth 获取DOM文档的根节点html元素对象
document.documentElement.clientWidth
weilingfeng的专栏
08-18 154
版权声明：转载时请以超链接形式标明文章原始出处和作者信息及本声明 http://solecjj.blogbus.com/logs/45973666.html 关于获取各种浏览器可见窗口大小的一点点研究 function getInfo() { var s = ""; s = " 网页可见区域宽：" document.body.clientWidth; s = " 网页可见区域...
对于获取浏览器页面大小的问题
Yvonne_12的专栏
03-08 556
今天研究了一下获取浏览器页面大小的问题 对于火狐、谷歌、苹果浏览器来说都可以直接使用 window.innerWidth (页宽) window.innerHeight (页高) 来获取。 而对于ie， ie9及以上的浏览器可以使用 window.innerWidth和window.innerHeight属性。 而ie8及以下的需要使用 document.documen
由document.body和document.documentElement想到的
09-06
在Web开发中，理解和掌握`document.body`和`document.documentElement`的区别至关重要，尤其是在处理页面布局和兼容性问题时。这两个对象分别代表了HTML文档的不同部分：`document.body`指的是HTML文档的实际内容...
用document.documentElement取代document.body的原因分析
09-05
在JavaScript中，`document.body` 和 `document.documentElement` 是两个经常用来获取页面信息的对象，但它们之间存在一些重要的差异，尤其是在处理不同浏览器的兼容性问题时。`document.documentElement` 通常被...
javascript document.compatMode兼容性
10-29
JavaScript中的`document.compatMode`属性是用来检测浏览器当前的渲染模式，这对于处理跨浏览器的兼容性问题至关重要。在网页开发中，浏览器对HTML文档的解析方式有两种：Quirks Mode（怪异模式）和Standards Mode...
doctype后如何获得body.clientHeight的方法
10-30
`document.body` 的一些属性（如 `clientHeight`, `clientWidth`, `offsetWidth`, `offsetHeight`, `scrollWidth`, `scrollHeight`, `scrollTop`, 和 `scrollLeft`）会被重新分配给 `document.documentElement`。...
document.documentElement.clientHeight与document.body.clientHeight的区别解析
qq_37734787的博客
03-21 1225
document.documentElement指的是元素 document.bodyt指的是元素 document.documentElement.clientHeight 屏幕可视区域高度
document.body.clientHeight 和 document.documentElement.clientHeight 的区别以及tomcat中路径大小写的问题...
weixin_33893473的博客
08-12 488
1、javascript中的 document.body.clientHeight 和 document.documentElement.clientHeight 的区别 这个问题是我在整合新的美工页面的时候发现的，在整合页面的时候菜单页面始终显示不出来。但是查看源代码，里面又已经打印出来了所有的菜单。唯一的解释就是js的问题了。用火狐firebug测试，发现其中一个取得页面高度的变量 b...
[js] 浏览器宽度 documentElement.clientWidth window.innerWidth
qq_14993591的博客
09-07 476
document.documentElement.clientWidth 获取浏览器窗口文档显示区域的宽度，不包括滚动条。 document.documentElement.clientHeight 获取浏览器窗口文档显示区域的高度，不包括滚动条。 // 浏览器大小改变事件 window.addEventListener( 'resize' , function(){ // 不包含浏览器滚动条宽度 var width1 = document
IE6下document.documentElement.clientHeight值为0的问题
狗
03-17 2264
在IE 6下 如果有 就用 document.documentElement 否则用 document.body
Js浏览器窗体宽高,用户屏幕可视区域大小位置及如何制作吸顶
qq_44880532的博客
10-31 646
浏览器对象 浏览器当前窗口的宽高 document.documentElement.clientWidth 和 document.documentElement.clientHeight 是获取浏览器当前窗口视图区域（也就是说不包括工具栏、滚动条等）的实际宽高（旧的HTML标准是写作document.body.clientWidth/clientHeight，已过时，建议大家用新标准来描述） 由于IE8-会把这个属性当作整个文档的宽度或高度，而JQ的$(window).height()在部分浏览器下也
html js居中,javascript居中怎么表示
weixin_35615010的博客
07-16 2555
javascript居中的实现方法：首先获取浏览器窗口；然后获取main的div元素；接着通过窗口宽高和div宽高计算位置；最后获取mcontent的div元素即可。本文操作环境：windows7系统、javascript1.8.5版、Dell G3电脑。具体问题：javascript居中怎么表示？js使div内容居中var button=document.createElement("input...
【JavaScript】Web API基础（五）
A Lucky Boy的博客
06-26 1380
目录事件委托移除事件的两种方式on+事件名=nullremoveEventListener('事件名称'，函数名)滚动事件和加载事件滚动事件scroll加载事件DOMContentLoaded元素的大小和位置scroll家族获取宽高获取位置检测页面滚动的距离offset家族获取宽高获取最近有定位父元素获取位置client家族获取宽高获取位置重绘和回流需求：让每个li标签点击之后，让当前li标签的文字变红优点： 给父元素加事件（可以提高性能）原理： 事件委托其实是利用事件冒泡的特点， 给父元素添加事件，子元素
html中js的居中显示,JS控制DIV居中对齐
weixin_29108051的博客
06-19 669
你真的认为居中对齐那么简单那么我们现在升个级，毕竟要打得怪有点难。。。消息会诊您将取消会诊，确认取消会诊吗？是否如这个代码弹出的模态框，怎么样让这个中间白色的块居中对齐，代码如下//获取黑色遮罩层的宽、高var modelWidth = $(‘#hz_qxalert1_id‘).width();var modelHeight= $(‘#hz_qxalert1_id‘).height();//获取取...
// 全局水印 let setWatermark = str => { let id = '1.23452384164.123412415' if (document.getElementById(id) !== null) { document.body.removeChild(document.getElementById(id)) } let can = document.createElement('canvas') can.width = 200 can.height = 200 let cans = can.getContext('2d') cans.rotate((-15 * Math.PI) / 150) cans.font = '14px Vedana' cans.fillStyle = 'rgba(200, 200, 200, 0.40)' cans.textAlign = 'left' cans.textBaseline = 'middle' cans.fillText(str, can.width / 8, can.height / 2) let div = document.createElement('div') div.id = id div.style.pointerEvents = 'none' div.style.top = '0px' div.style.left = '0px' div.style.position = 'fixed' div.style.zIndex = '100000' div.style.width = document.documentElement.clientWidth + 'px' div.style.height = document.documentElement.clientHeight + 'px' div.style.background = 'url(' + can.toDataURL('image/png') + ') left top repeat' document.body.appendChild(div) return id } const set = str => { let id = setWatermark(str) setInterval(() => { if (document.getElementById(id) === null) { id = setWatermark(str) } }, 500) window.onresize = () => { setWatermark(str) } } const outWatermark = id => { if (document.getElementById(id) !== null) { const div = document.getElementById(id) div.style.display = 'none' } } const out = () => { outWatermark('1.23452384164.123412415') } const reset = str => { out() set(str) } export default { set, out, reset, } 帮我优化代码
最新发布
06-01
div.style.height = document.documentElement.clientHeight + 'px' div.style.background = 'url(' + canvas.toDataURL('image/png') + ') left top repeat' document.body.appendChild(div) return id } ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值