监听窗口大小改变,同时根据窗口大小修改某个元素的大小

jQuery的方法:

<script>
    $(window).resize(function(){
        var width = $(this).width();
        var height = $(this).height();
        alert(‘width’+width+’-height’+height);
    });
</script>    

以上的方法,不能写在页面加载完成事件函数$(function(){})内部,而需要写在外面。

页面加载完成事件:

$(function(){});

$(document).ready(function(){});

window.onload = function(){};

我们项目中的代码:

// 监听窗口大小变化
function changeHeight(){
    let h = document.documentElement.clientHeight;
    document.getElementById("searchResult").style.height = h - 9 - 74 + ‘px‘;
    document.getElementById("goodsTableBody").style.height = h - 9 - 74 -160 + ‘px‘;
}
window.onload = function(){
    changeHeight();
};
window.onresize = function(){
    changeHeight();
};

原文地址:https://www.cnblogs.com/zoeeying/p/9960242.html

时间: 2024-07-31 11:19:32

监听窗口大小改变,同时根据窗口大小修改某个元素的大小的相关文章

EditText 使用细节(输入内容改变时的监听事件、透明背景、修改提示文字颜色、输入内容密文显示)

1.对EditText的输入内容进行监听,给EditText 绑定 addTextChangedListener 监听事件 即可. 2.EditText输入内容,密文显示: android:password="true" 3.将EditText边框设置成透明的: android:background="#00000000" 4.修改EditText中hint文字颜色: android:textColorHint="#ffffff" 很多时候,我们

利用Node的chokidar 监听文件改变的文件。

最近维护一个项目.每次改完东西,都要上传到服务器.然后有时候就忘记一些东西,于是就想有没有可以方法能监听文件的改变.然后我再利用程序把更改的文件一键上传到服务器. 于是就找到了nodejs 的chokidar模块. 然后利用redis的set集合.因为我们频繁更改.如果用普通的字符 会增加比较.set是一个集合,里面的元素都是不重复的.正好可以利用这个特性.帮我们记录更改的记录文件.删除的时候,然后删掉set中的文件.目前只做了增加或修改的文件提交,如果本地删除的 不会同步到服务器. 监听本地文

web项目启动时配置监听本地目录文件添加, 删除, 修改, 等操作

大致原理:  通过配置监听器在web容器启动或销毁的时候做相应的操作, 系统目录的监听器使用从jdk1.7才有的WatchService 操作步骤: 1> 自定义自己的监听器实现ServletContextListener接口中的两个方法, 一个未初始化Init方法, 一个是销毁方法Destoryed, 由于WatchService为阻塞型方法, 所以需要新建线程防止web容器无法启动 1 package com.mtl.fill.listener; 2 3 4 import com.mtl.f

页面监听状态改变网站Title

长期以来我们一直缺少一个判断用户是否正在浏览某个指定标签页的方法.用户是否去看别的网站了?他们切换回来了么? 现在,HTML5里页面可见性接口就提供给了程序员一个方法,让他们使用visibilitychange页面事件来判断当前页面可见性的状态,并针对性的执行某些任务.同时还有新的document.hidden属性可以使用. document.hidden 这个新出现的document.hidden属性,它显示页面是否为用户当前观看的页面,值为ture或false. document.visib

ArcEngine GroupLayer监听图层改变

最近项目中需要用到在TOC监听图层的变化,从而针对添加的不同图层进行不同的操作.但是当TOC中添加图层组时,无法监听到图层组中添加图层的动作.也就无法获取到向图层组中添加的图层. 在开发手册中也没有找到相应的事件接口来实现.于是就动手自己写了一个事件监听. 实现的思路是,自己构建事件接口,然后构建一个GroupLayer的子类来实现这个接口. 具体看代码: /////////////////////////////// /////// 事件接口的代码 // 构建图层组图层增加的委托 public

groovy修改代码不用重启通过监听记录改变时间重新加载

groovy是一个跟java 很像的脚本语言,基于jvm,写法比java随意一点可以跟java代码很好的集合,如果项目中有用到规则可以在控制层使用groovy编写代码,调用规则. 在spring-mvc的配置文件中配置下面的

Angularjs【监听数据的变化】和【如何修改数据】和【数据变化的传播】

一:监听数据的变化: 由于编译仅仅在启动引导时执行一次,这意味着我们的link函数只会被调用一次,那么, 如果数据变化,在界面上将不会有任何反馈,即界面和数据将变得不同步了. 这需要持续监听数据的变化. 好在AngularJS的scope对象可以使用$watch()方法,对建立在其上的变量的变化进行监听: watch(watchExpression,listener,[objectEquality]);watch方法要求传入三个参数: watchExpression - 要监听的表达式,比如:"

UISwitch的方法和监听文本框的文字改变

1.UISwitch * UISwitch继承自UIControl,因此也能像UIButton一样监听一些事件,比如状态改变事件 * UISwitch可以通过拖线监听状态改变 * UISwitch可以通过addTarget:...方法监听状态改变 - (void)addTarget:(id)target action:(SEL)action forControlEvents:(UIControlEvents)controlEvents; // 其中controlEvents参数传递的是:UICo

React监听窗口变化事件

功能说明:本例子采用MUI table组件 + React实现. 需求描述:固定表头,列表高度随浏览器窗口的改变而改变.(本例中当窗口高度小于472像素后,便不作限制) 实现简介:1.监听浏览器窗口,每当窗口大小发生改变,给列表高度重新复制: 2. 列表高度通过state来管理. 关键代码: 窗口监听事件管理: 列表高度处理函数: 组件里的设置: 效果图(关键项涂了马赛克...) 窗口高于472px: 窗口高度低于472px(列表边上的滚动条不见了,取而代之的浏览器窗口的滚动条,木有截下来)