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

最新推荐文章于 2022-03-21 17:34:21 发布
最新推荐文章于 2022-03-21 17:34:21 发布
阅读量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
    评论
专栏目录
html js居中,javascript居中怎么表示
weixin_35615010的博客
07-16 2548
javascript居中的实现方法：首先获取浏览器窗口；然后获取main的div元素；接着通过窗口宽高和div宽高计算位置；最后获取mcontent的div元素即可。本文操作环境：windows7系统、javascript1.8.5版、Dell G3电脑。具体问题：javascript居中怎么表示？js使div内容居中var button=document.createElement("input...
JavaScript 滚动条示例,控制居中document.documentElement.scrollTop,document.body.scrollTop,oDiv.offsetHeight
骑着猪猪去拍拖
06-08 639
JavaScript 滚动条示例,控制居中document.documentElement.scrollTop,document.body.scrollTop,oDiv.offsetHeight #div1 { width:100px; height:100px; background-color:#676767; position:absolute; right:0px;} documen
html中js的居中显示,JS控制DIV居中对齐
weixin_29108051的博客
06-19 667
你真的认为居中对齐那么简单那么我们现在升个级，毕竟要打得怪有点难。。。消息会诊您将取消会诊，确认取消会诊吗？是否如这个代码弹出的模态框，怎么样让这个中间白色的块居中对齐，代码如下//获取黑色遮罩层的宽、高var modelWidth = $(‘#hz_qxalert1_id‘).width();var modelHeight= $(‘#hz_qxalert1_id‘).height();//获取取...
window.open()居中和显示标题
cblstc的博客
04-28 3813
function showStatus(url) { // 弹框宽高 var width = 470; var height = 170; // 弹框居中 var top = (window.screen.height - 30 - height) / 2; var left = (window.screen.width - 30 - width) / 2; v...
document.documentElement.clientHeight与document.body.clientHeight的区别解析
qq_37734787的博客
03-21 1197
document.documentElement指的是元素 document.bodyt指的是元素 document.documentElement.clientHeight 屏幕可视区域高度
由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` 通常被...
document.compatMode的CSS1compat使用介绍
09-04
`document.compatMode` 是一个在JavaScript中用于检测浏览器渲染页面所使用的渲染模式的属性。这个属性可以帮助开发者了解浏览器是否按照W3C的标准（CSS1Compat）还是非标准（BackCompat，也称为Quirks Mode）来解析...
javascript 获取网页高度宽度.pdf
11-23
- `document.documentElement.clientWidth` 和 `document.documentElement.clientHeight` 分别返回可视区域的宽度和高度。 - **Opera**： - `document.body.clientWidth` 和 `document.body.clientHeight` 分别...
[js] 浏览器宽度 documentElement.clientWidth window.innerWidth
qq_14993591的博客
09-07 472
document.documentElement.clientWidth 获取浏览器窗口文档显示区域的宽度，不包括滚动条。 document.documentElement.clientHeight 获取浏览器窗口文档显示区域的高度，不包括滚动条。 // 浏览器大小改变事件 window.addEventListener( 'resize' , function(){ // 不包含浏览器滚动条宽度 var width1 = document
document​.get​Element​ById
速冻的博客
04-15 2545
Document的方法 getElementById()返回一个匹配特定 ID的元素. 由于元素的 ID 在大部分情况下要求是独一无二的，这个方法自然而然地成为了一个高效查找特定元素的方法。 如果需要查找到那些没有ID 的元素，你可以考虑通过CSS选择器使用 querySelector()。 ...
document.documentElement和document.body的区别
weixin_43694639的博客
03-06 1892
Document类的documentElement属性指代文档的根元素，在HTML文档中，它总是指代元素。 document.body是一个HTML文档的元素，document.head是元素，它们指的是子节点。 ...
document.body 与 document.documentElement区别
骆小胖~
10-08 4107
&gt;  （2）什么是 document.documentElement？          返回html dom中的root 节点 即&lt;html&gt; （3）document.documentElement 与 document.body的应用场景 获取 scrollTop 方面的差异 ①在chrome(版本 52.0.2743.116 m)下获取scrollTop只能通过document.body.scrollTop,而且DTD是否存在,不会影响 docume
clientHeight/clientWidth的使用
My Blog
03-14 941
 在CSS中定义max/min width/height时，常见的用法如下：min-width:50px;  /*FF*/width:expression(document.body.clientWidth对其中的clientWidth(clientHeight类似)解释如下：只读属性，返回content和padding的width语法：document.getElementById("eleme
js设置font-size大小实现页面适配
qq_43579525的博客
05-14 6178
clientWidth 和 getBoundingClientRect().width区别区别： getBoundingClientRect()：getBoundingClientRect用于获取某个元素相对于视窗的位置集合,即父级的宽度+2padding+2border。 clientWidth： 返回元素的宽度（包括元素宽度、内边距，不包括边框和外边距） 方法一：通过getBound...
// 全局水印 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、付费专栏及课程。

余额充值