0

如何为主流浏览器（IE、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>
4

1 回答 1

0
于 2013-01-31T09:06:05.603 回答