onresize事件

最新推荐文章于 2020-11-22 21:17:47 发布

trarck2

最新推荐文章于 2020-11-22 21:17:47 发布

阅读量186

点赞数 1

分类专栏： js 文章标签： IE Chrome HTML 浏览器 XHTML

本文链接：https://blog.csdn.net/trarck2/article/details/83676534

版权

js 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

onresize的定义方式
一、直接在html中定义
如<body οnresize="doResize()"/>
二、直接给onresize赋值
可以给window和body的onresize赋值
如window.οnresize=function(){},document.body.οnresize=function(){}
三、使用事件监听
只对window有作用
如window.addEventListener("resize",fn);
说明：
1、直接给onresize赋值会覆盖在html中定义。
2、直接给onresize赋值，window,body只有一个起作用，后定义的会覆盖先定义的
3、事件监听只对window有效，可以其它方式同时触发。


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title> new document </title>
  <style>html,body{border:5px solid #06F;}</style>
 </head>

 <body onresize="a();">
   <div id="show">0</div>  
   <div id="div" style="border:1px solid #000"></div>  
   <textarea id="re" cols="30" rows="6"></textarea> 
    <script>  
    var re=document.getElementById("re");
     //同时定义body与window的onresize
     //ff下window上的启作用，ff下，用js定义在body上不启作用
     //ie chrome opra下 根据body与window定义的先后顺序 后定义的覆盖先定义的

     //在任意浏览器下，js定义的会覆盖在标签上直接定义的onresize事件。

     document.body.onresize=function () {
        re.value+='this is body js resize.\n';
     }
     window.onresize=function () {
        re.value+='this is window resize.\n';
     } 

     //使用listener监听事件只能在window上，在body上无效。
     bind(document.body,"resize",function(){
        re.value+='this is body  resize in litener.\n';
     });
     bind(window,"resize",function(){
        re.value+='this is window  resize in litener.\n';
     });
     function a() {
         re.value+=("this is body html resize\n");
     }
    //任意html元素，改变内容，是否触发onresize，则只有ie下启作用
    var i = 0;  
	var div=document.getElementById("div");
	var show=document.getElementById("show");
    div.onresize = function(){ show.innerHTML = ++i; }  
    setTimeout('div.innerHTML="test"', 1000)  
    setTimeout('div.style.height="50px"', 2000)  ;

   function bind(el,eventName,fn) {
        if (window.addEventListener) {
            el.addEventListener(eventName, fn,false);
        } else if (window.attachEvent) {
                el.attachEvent("on" + eventName, fn);
        } 
   }
   </script>  
 </body>
</html>

trarck2

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
onresize事件

onresize的定义方式一、直接在html中定义如二、直接给onresize赋值可以给window和body的onresize赋值如window.onresize=function(){},document.body.onresize=function(){}三、使用事件监听只对window有作用如window.addEve...
复制链接

扫一扫

专栏目录