div设置了height:window.innerHeight但窗口变化时不起作用的解决代码

最新推荐文章于 2023-09-30 22:10:15 发布
最新推荐文章于 2023-09-30 22:10:15 发布
阅读量1.8k 收藏
点赞数
文章标签： python javascript ViewUI
原文链接：https://my.oschina.net/u/268088/blog/1808399
版权

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

componentDidMount(){

window.addEventListener('resize',this.onWindowResize());

}

componentWillUnmount(){

window.removeEventListener('resize',this.onWindowResize());

}

onWindowResize(){

let newHeight = window.innerHeight-this.getHeight(100);

setTimeout(() => {

this.setState({containerHeight:newHeight})

},200);

}

转载于:https://my.oschina.net/u/268088/blog/1808399

weixin_34406086
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jQuery height()、innerHeight()、outerHeight()函数的区别详解
10-22
在使用jQuery库进行Web开发的过程中，开发者经常需要获取或设置元素的高度，此时有三个函数可以使用：height()、innerHeight()和outerHeight()。尽管它们都与高度相关，但它们所获取和设置的范围却各不相同。本文将...
window.innerHeight 不清楚视高是哪里的导致的错误
yusun1234的博客
08-02 715
1、elementui table高度自适应问题中，使用window.innerHeight自动获取视高（除去路径栏工具栏的屏幕高度） 2、将table中高度动态绑定window.innerHeight - 对应的表格正常高度，即可 3、当表格高大时如389px时，网页缩放会导致表格出现滚动条，原因在于动态绑定的高度太小，导致的，所以还是给固定高度 ...
js 设置html的高度,在JAVASCRIPT中将div高度设置为window.innerHeight
weixin_34518801的博客
06-17 290
我发现的问题是window.load可能会在DOM元素创建之前触发,你可以删除html,body css但是这会给html,body提供一些余量,如果你不想使用css应该在javascript中处理, #left css规则仅用于理解div高度Thirumalai-Window size#left{width:200px;background:red;}#inner{height:100%;ove...
浏览器窗口变化实时获取window当前大小
liujiexiong11的专栏
09-12 1199
主要步骤是两步： 1、获取屏幕尺寸和浏览器文本区域的尺寸 通过window的内置属性(innerwidth和innerheight)、document的内置对象(documentElement和body;对应的属性是clientwidth和clientheight)来获取 主要内容就是如下function：     //----chart尺寸默认值----     var defau
window.innerHeight undefined
libinglin2009的专栏
07-08 508
ie8以上版本获取屏幕高度用window.innerHeight ie8以下版本用document.body.clientHeight 兼容ie版本可以使用 var height=window.innerHeight||document.body.clientHeight;
动态获取div的高度 随着窗口变化而变化 window.resize
qq_27970999的博客
10-09 9575
autodivheight(); function autodivheight(){ //函数：获取尺寸 //获取浏览器窗口高度 var winHeight=0; if (window.innerHeight){ winHeight = window.innerHeight; } else if ((document.body) && (document.body.clientH
handleResize() { // 处理窗口大小变化 const windowWidth = window.innerWidth; console.log(window.innerWidth+" "+ window.innerHeight) if(windowWidth<1300){ this.divWidth='1300px' this.divHeight='1300px' }else{ this.divWidth='100%' this.divHeight='100%' } } },将这个改成放大时等比例放大，其内部元素位置不变
07-15
const windowHeight = window.innerHeight; const originalWidth = 1300; // 原始宽度 const originalHeight = 1300; // 原始高度 const scale = Math.min(windowWidth / originalWidth, windowHeight / ...
function showPopup(imageSrc) { var popup = document.createElement("div"); var popupImg = document.createElement("img"); var scale = 1; var isDragging = false; var startX, startY, translateX, translateY; // 设置弹出窗口中的图片 popupImg.src = imageSrc; popupImg.style.transform = scale(${scale}); // 加载完成后计算图片的宽高比例 popupImg.onload = function() { var imgWidth = popupImg.width; var imgHeight = popupImg.height; // 计算图片的缩放比例 var windowWidth = window.innerWidth * 0.8; // 按照弹出窗口宽度的80%计算 var windowHeight = window.innerHeight * 0.8; // 按照弹出窗口高度的80%计算 var widthScale = windowWidth / imgWidth; var heightScale = windowHeight / imgHeight; scale = Math.min(widthScale, heightScale); // 设置弹出窗口中的图片样式 popupImg.style.transform = `scale(${scale})`; popupImg.style.display = "block"; popupImg.style.margin = "auto"; function centerPopup() { var windowWidth = window.innerWidth * 0.8; // 按照弹出窗口宽度的80%计算 var windowHeight = window.innerHeight * 0.8; // 按照弹出窗口高度的80%计算 var popupRect = popup.getBoundingClientRect(); var popupWidth = popupRect.width; var popupHeight = popupRect.height; scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop; var offsetLeft = (windowWidth - popupWidth * scale) / 2; var offsetTop = (windowHeight - popupHeight * scale) / 2 + scrollTop; // 设置弹出窗口的位置 popup.style.left = offsetLeft + "px"; popup.style.top = offsetTop + "px"; } // 设置悬浮窗样式 function setPopupStyle() { var windowWidth = window.innerWidth * 0.8; // 按照弹出窗口宽度的80%计算 var windowHeight = window.innerHeight * 0.8; // 按照弹出窗口高度的80%计算 popup.style.position = "fixed"; popup.style.width = windowWidth + "px"; popup.style.height = windowHeight + "px"; popup.style.backgroundColor = "transparent"; popup.style.zIndex = "9999"; popup.onclick = function (event) { if (event.target === popup) { popup.style.display = "none"; } }; } // 在设置图片加载完成后调用居中弹出窗口和设置悬浮窗样式的函数 popupImg.onload = function() { // 设置图片缩放比例 var imgWidth = popupImg.width; var imgHeight = popupImg.height; var widthScale = window.innerWidth * 0.8 / imgWidth; var heightScale = window.innerHeight * 0.8 / imgHeight; scale = Math.min(widthScale, heightScale); popupImg.style.transform = scale(${scale}); // 设置弹出窗口样式和居中位置 setPopupStyle(); centerPopup(); // 显示图片和悬浮窗 popupImg.style.display = "block"; popup.style.display = "block"; } // 添加图片到悬浮窗 popup.appendChild(popupImg); document.body.appendChild(popup);这段代码可以怎么优化
07-14
1. 将重复使用的代码片段提取为函数：可以将计算弹出窗口位置的代码和设置弹出窗口样式的代码提取为独立的函数，以提高代码的可读性和可维护性。 ```javascript function centerPopup() { // 计算弹出窗口位置的...
function showPopup(imageSrc) { var popup = document.createElement("div"); var popupImg = document.createElement("img"); var scale = 1; var isDragging = false; var startX, startY, translateX, translateY; // 设置弹出窗口中的图片 popupImg.src = imageSrc; popupImg.style.transform = `scale(${scale})`; // 加载完成后计算图片的宽高比例 popupImg.onload = function() { var imgWidth = popupImg.width; var imgHeight = popupImg.height; // 计算图片的缩放比例 var windowWidth = window.innerWidth * 0.8; // 按照弹出窗口宽度的80%计算 var windowHeight = window.innerHeight * 0.8; // 按照弹出窗口高度的80%计算 var widthScale = windowWidth / imgWidth; var heightScale = windowHeight / imgHeight; scale = Math.min(widthScale, heightScale); // 设置弹出窗口中的图片样式 popupImg.style.transform = `scale(${scale})`; popupImg.style.display = "block"; popupImg.style.margin = "auto"; // 居中弹出窗口 function centerPopup() { var windowHeight = window.innerHeight; var popupHeight = popup.offsetHeight; var scrollTop = window.pageYOffset || document.documentElement.scrollTop; var offset = (windowHeight - (imgHeight * scale)) / 2 + scrollTop; // 设置弹出窗口的垂直位置 popup.style.top = offset + "px"; } // 设置悬浮窗样式 popup.style.position = "fixed"; popup.style.top = "10%"; popup.style.left = "10%"; popup.style.width = windowWidth + "px"; popup.style.height = windowHeight + "px"; popup.style.backgroundColor = "transparent"; popup.style.zIndex = "9999"; // 添加图片到悬浮窗 popup.appendChild(popupImg); document.body.appendChild(popup); // 初始化居中弹出窗口 centerPopup(); // 添加滚动和调整窗口大小事件监听器 window.addEventListener("scroll", centerPopup); window.addEventListener("resize", centerPopup); // 点击事件监听器，点击其他区域时隐藏弹出窗口 popup.onclick = function () { popup.style.display = "none"; }; // 移除滚动和调整窗口大小事件监听器 function removeListeners() { window.removeEventListener("scroll", centerPopup); window.removeEventListener("resize", centerPopup); } // 在窗口关闭时移除事件监听器 window.onbeforeunload = function () { removeListeners(); }; };需要不管第几行第几列的图片放大时，放大的悬浮窗始终在当前页面最中心
07-14
var windowHeight = window.innerHeight; var popupHeight = popup.offsetHeight; var scrollTop = window.pageYOffset || document.documentElement.scrollTop; var offset = (windowHeight - popupHeight) / 2...
要在 Vue 中使 iro.js 控件自适应宽度和高度，您可以在初始化 iro.js 时使用 `window.innerWidth` 和 `window.innerHeight` 属性设置宽度和高度。这是一个简单的示例： 1. 安装 iro.js： ```bash npm install iro --save ``` 2. 在 Vue 组件中引入 iro.js： ```javascript import iro from '@jaames/iro'; ``` 3. 添加一个 div 元素作为颜色选择器的容器，并在 Vue 组件的 `mounted` 生命周期函数中初始化 iro.js： ```html <template> <div> <div ref="colorPicker"></div> </div> </template> <script> import iro from '@jaames/iro'; export default { name: 'ColorPickerComponent', mounted() { this.initColorPicker(); }, methods: { initColorPicker() { const width = window.innerWidth; const height = window.innerHeight; const colorPickerScale = Math.min(width, height) * 0.8; const colorPicker = new iro.ColorPicker(this.$refs.colorPicker, { width: colorPickerScale, height: colorPickerScale }); colorPicker.on('input:change', (color) => { console.log('Color changed:', color.hexString); }); } } } </script> ``` 上述示例中，颜色选择器的宽度和高度将根据窗口大小自动缩放。为使颜色选择器在窗口大小改变时自适应宽度和高度，可以添加 `window.onresize` 监听器并重新初始化颜色选择器。注意，在组件销毁时，也需要清除监听器，以避免内存泄漏。这里是如何为颜色选择器添加 `resize` 监听器的示例： ```javascript export default { ... mounted() { this.initColorPicker(); window.addEventListener('resize', this.initColorPicker); }, beforeDestroy() { window.removeEventListener('resize', this.initColorPicker); }, ... } ``` 现在，当窗口大小改变时，iro.js 颜色选择器会自动调整其宽度和高度。
05-05
非常赞成您的方法，使用 `window.innerWidth` 和 `...另外，您提到的添加 `window.onresize` 监听器并重新初始化颜色选择器的方法也是非常好的，这可以确保在窗口大小改变时颜色选择器可以自动调整大小。感谢您的分享！
根据屏幕窗口大小动态改变选项卡内容高度
weixin_43545329的博客
03-02 446
点击全屏时动态改变下方选项卡内容高度 function fullScreen() { var winHeight = 0; if(window.innerHeight) winHeight = window.innerHeight; else if((document.body) &amp;&amp; (document.body.clientHeight)) winHeight = doc...
js 延时操作 获取滚动条高度
肖皓文
03-11 322
代码记录 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&g
关于clientHeight、scrollHeight、offsetHeight、window.innerHeight、window.outerHeight等元素及浏览器属性浅析
qq_44382590的博客
09-20 2472
前几天笔试碰到了一道关于可视区域高度通过什么属性取值的问题，面对四个选项一脸傻样儿，赶紧复习了一下。发现element的clientHeight、scrollHeight、offsetHeight和window的outerHeight、innerHeight、screen.height这几个属性还真不好区分，在网上查阅一番资料后，总结出来供以后参考。 这篇文章会说明documentElement（html）、body、普通的element（如div）作为Element对象...
height: calc(100vh - 100px)；
最新发布
fury的博客
09-30 2602
因此，这段代码的意思是将元素的高度设置为视窗高度减去100像素。这样，元素的高度会根据视窗大小自动调整，并且保留一定的空间（100像素）在顶部或底部。其中，vh是视窗的高度单位，表示相对于视窗高度的百分比，1vh等于视窗高度的1%。而px则是像素单位，表示具体的像素数值。这段代码是用来设置元素的高度。它使用了CSS的calc()函数来计算高度值，公式为100vh - 100px。
【JS中innerHeight/Width、clientHeight/Width和offsetHeight/Width使用及其详解】
Linxuejie_1030的博客
01-19 2911
JS中innerHeight/Width、clientHeight/Width、offsetHeight/Width属性详解
js 获取窗口高度 兼容 各种浏览器
qq_40509733的博客
12-20 198
windowHight() { let h = 0 if (window.innerHeight) { h = window.innerHeight; //Mozilla } else if (document.documentElement.clientHeight) { h = document.documentElement.clientHeight...
js与jquery获得页面大小、滚动条位置、元素位置
lizaochengwen的专栏
01-31 133
//页面位置及窗口大小 function GetPageSize() { var scrW, scrH; if(window.innerHeight && window.scrollMaxY) { // Mozilla scrW = window.innerWidth + window.scrollMaxX; scrH = window.innerHeight +...
Window height、innerHeight、outerHeight区别
忘川
12-06 7110
1. height 指的是元素本身的高度，不包括padding、border、margin，如下图所示： 2.innerHeight包括元素自身的高度+padding部分，如图所示： 3.outerHeight高度为：元素自身高度 + padding + border ； 如果参数为true时，高度为：元素自身高度 + padding + border +margin，如下图所...
7种Height的比较：screen.height, screen.availHeight, window.innerHeight, window.outerHeight....
Sarahapy的博客
06-30 4885
这7种高度的基本含义： screen.height：用户屏幕高度 screen.availHeight：用户屏幕可用高度，减去了窗口工具值类的界面特征 window.innerHeight：浏览器窗口的视口高度，包括水平滚动条 window.outerHeight：浏览器窗口外部高度 document.body.offsetHeight：文档中 body 部分的高度 document.documentElement.clientHeight：文档可显示区域的高度 document.documentElem
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值