Javascript 如何为主要浏览器（IE、firefox和google）的div.onresize事件注册或添加侦听器？_Javascript_Jquery_Html_Css_Addeventlistener

Javascript 如何为主要浏览器（IE、firefox和google）的div.onresize事件注册或添加侦听器？

javascript jquery html css

Javascript 如何为主要浏览器（IE、firefox和google）的div.onresize事件注册或添加侦听器？,javascript,jquery,html,css,addeventlistener,Javascript,Jquery,Html,Css,Addeventlistener,如何为主要浏览器（如Firefox和chrome）的div.onresize事件注册或添加侦听器？div标签中的Onresize事件在Mozilla、Chrome等中不起作用。我用edit plus软件检查了相同的代码，它工作正常 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE&g

如何为主要浏览器（如Firefox和chrome）的div.onresize事件注册或添加侦听器？div标签中的Onresize事件在Mozilla、Chrome等中不起作用。我用edit plus软件检查了相同的代码，它工作正常

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
    var NumOfRow=1;
    var mainDiv;
    var newButton;
    function AddNewItems() {
        var container = document.getElementById ("msgPanel");
        //var message = "The height with padding: " + container.clientHeight + "px.\n";
        var message = "The height with padding and border: " + container.offsetHeight + "px.\n";
        alert(message);
        NumOfRow++;
        mainDiv =document.getElementById('msgPanel');
        newButton=document.createElement('input');
        newButton.type='button';
        newButton.value='NewButton';
        newButton.id='btn'+NumOfRow;
        mainDiv.appendChild(newButton);
    }
    function getParentDivHeight() {
    alert("entered inside");
        var container = document.getElementById ("msgPanel");
        var message = "The height with padding and border onClick event: " + container.offsetHeight + "px.\n";
        var strheight = container.offsetHeight;
        alert("The DIV height in Pixel is :   " + strheight +"px");
    }
    function RemoveNewItems() {
        if(NumOfRow > 1) {
            var container = document.getElementById ("msgPanel");
            var message = "The height with padding and border onClick event: " + container.offsetHeight + "px.\n";
            alert(message);
            mainDiv.removeChild(newButton);
            alert("button Removed so the DIV height will be decreased");
        } else {
            alert("Please add a Dynamic Button");
        }
    }
//-->
</script>
<style>
body{
font-family:Arial, Helvetica, sans-serif; 
font-size:13px;
}
.info, .success, .warning, .error, .validation {
border: 1px solid;
margin: 10px 0px;
padding:15px 10px 15px 50px;
background-repeat: no-repeat;
background-position: 10px center;
}
.info {
color: #00529B;
background-color: #BDE5F8;
height: 460px;
width: 200px;
background-image: url('info.png');
}
.success {
color: #4F8A10;
background-color: #DFF2BF;
background-image:url('success.png');
}
.warning {
color: #9F6000;
background-color: #FEEFB3;
background-image: url('warning.png');
}
.error {
color: #D8000C;
background-color: #FFBABA;
background-image: url('error.png');
}
</style>
</HEAD>

<BODY>
 <div class="info" id="msgPanel" onresize="getParentDivHeight()" >Info message

    <div class="success">Successful operation message</div>

    <div class="warning">Warning message</div>

    <div class="error">Error message</div>

    <div id="Container1" >

    </div>

</div>
<input type="submit" id="btnSubmit" value="AddButton" onclick="AddNewItems()" />
</br>
</br>
<input type="button" id="btnSubmit1" value="RemoveButton" onclick="RemoveNewItems()" />
</br>
</br>
<input type="button" id="btnSubmit2" value="ShowDIVHeight" onclick="getParentDivHeight()" />
</BODY>
</HTML>


新文件
var numorrow=1；
var mainDiv；
var newButton；
函数AddNewItems（）{
var container=document.getElementById（“msgPanel”）；
//var message=“带填充的高度：“+container.clientHeight+”px.\n”；
var message=“带填充和边框的高度：“+container.offsetHeight+”px。\n”；
警报（信息）；
NumOfRow++；
mainDiv=document.getElementById（'msgPanel'）；
newButton=document.createElement（'input'）；
newButton.type='button'；
value='newButton'；
newButton.id='btn'+numorrow；
主分区附件（新按钮）；
}
函数getParentDivHeight（）{
警报（“进入内部”）；
var container=document.getElementById（“msgPanel”）；
var message=“带填充和边框的高度onClick事件：“+container.offsetHeight+”px。\n”；
var strheight=container.offsetHeight；
警报（“像素中的DIV高度为：“+strheight+”px”）；
}
函数RemoveNewItems（）{
如果（numorrow>1）{
var container=document.getElementById（“msgPanel”）；
var message=“带填充和边框的高度onClick事件：“+container.offsetHeight+”px。\n”；
警报（信息）；
mainDiv.removeChild（新按钮）；
警报（“移除按钮，以降低DIV高度”）；
}否则{
警报（“请添加动态按钮”）；
}
}
//-->
身体{
字体系列：Arial、Helvetica、无衬线字体；
字体大小：13px；
}
.info、.success、.warning、.error、.validation{
边框：1px实心；
利润率：10px 0px；
填充：15px 10px 15px 50px；
背景重复：无重复；
背景位置：10px中心；
}
.info{
颜色：#00529B；
背景色：#BDE5F8；
高度：460px；
宽度：200px；
背景图片：url（'info.png'）；
}
.成功{
颜色：#4F8A10；
背景色：#DFF2BF；
背景图片：url（'success.png'）；
}
.警告{
颜色：#9F6000；
背景色：#FEEFB3；
背景图片：url（'warning.png'）；
}
.错误{
颜色：#D8000C；
背景色：#FFBABA；
背景图像：url（'error.png'）；
}
信息信息
成功操作消息
警告信息
错误消息

通常，div的大小不会自行调整。由于以下原因，它已调整大小：

调整窗口大小
您可以向其中添加元素

在第一种情况下，可以使用jQuery进行绑定。在第二种情况下，您必须自己从向div添加元素的位置调用该事件（resize事件不会传递给您正在侦听的div）