Question

我是Learnig JavaScript，我注意到当div调整大小时，我不知道如何在我的测试网站中触发更改。

这是代码：

<!DOCTYPE html>
<html>
<head>
<script>
var  expanded = document.getElementById('Proba').style.width='100%';
function Expand() {
document.getElementById('Proba').style.width='100%';
document.getElementById('Proba').style.height='100%'
document.getElementById('Proba').style.position='absolute';
document.getElementById('Proba').style.left='0px';
document.getElementById('Proba').style.top='0px';
document.getElementById('Proba').style.opacity='0.68';
document.getElementById('Proba').style.zIndex='1';
}
</script>
<style>
#Proba
{
background-color:#b0c4de;
width: 100px;
height: 100px;
}
</style>
</head>

<body id="Body">

<script>
if (expanded=true) {
document.write('You did it!')}
</script>
<div id="Proba" onclick="Expand()"><div>

</body>
</html>

显然，如果陈述没有给我我想要的东西。

Answer 1

DIV没有onResize事件，但这并不意味着您可以创建自己的事件。

http://jsfiddle.net/pJ8yH/

(function() {
    var resizeObjects = [];
    window.setInterval(function() {
        for(var i=0; i<resizeObjects.length; i++) {
            var ro = resizeObjects[i];
            if(ro.element.parentNode == null) {
                // node is not part of the DOM right now
                continue;
            } else if(ro.element.offsetHeight != ro.height || ro.element.offsetWidth != ro.width) {
                ro.height = ro.element.offsetHeight;
                ro.width = ro.element.offsetWidth;
                for(var j=0; j<ro.callbacks.length; j++) {
                    ro.callbacks[j].apply(ro.element);
                }
            }
        }
    }, 100);
    HTMLElement.prototype.resize = function(callback) {
        if(arguments.length == 1 && typeof(callback) == "function") {
            // add a new callback function
            var obj = null;
            for(var i=0; i<resizeObjects.length; i++) {
                if(resizeObjects[i].element == this) {
                    obj = resizeObjects[i];
                    break;
                }
            }
            if(obj) {
                obj.callbacks.push(callback);
            } else {
                resizeObjects.push({
                    "element": this,
                    "callbacks": [callback],
                    "height": this.offsetHeight,
                    "width": this.offsetWidth
                });
            }
        } else if(arguments.length == 0) {
            // trigger resize callback functions
            for(var i=0; i<resizeObjects.length; i++) {
                var ro = resizeObjects[i];
                if(ro.element == this) {
                    for(var j=0; j<ro.callbacks.length; j++) {
                        ro.callbacks[j].apply(this);
                    }
                    break;
                }
            }
        }
    };
})();

测试出来

var counter=0;
document.getElementById("demo1").resize(function() {
    this.innerHTML = (++counter);
});
document.getElementById("demo2").resize(function() {
    this.innerHTML = (++counter);
});

Answer 2

好像你想要创建自己的扩展事件。下面是一些为您的对象创建expanded事件的代码。您可以使用此代码创建自己的事件框架，或者只使用jQuery。

在代码顶部创建一个事件，该事件在触发事件时重复使用。在expand()函数结束时，我调用fireEvent()。 fireEvent()会触发subscribe()中添加的回调。

一些注意事项：

为getElementById()中的每一行拨打expand()是浪费。最好只将值赋给变量。
我非常确定IE 9+使用dispatchEvent()和addEventListener()，因此除非您打算支持IE8，否则不需要条件语句。 createEvent()不在IE中。

代码

var exapndEvent = createEvent('expanded');

function expand() {
    var elem = document.getElementById('Proba');

    elem.style.width = '100%';
    elem.style.height = '100%'
    elem.style.position = 'absolute';
    elem.style.left = '0px';
    elem.style.top = '0px';
    elem.style.opacity = '0.68';
    elem.style.zIndex = '1';

    fireEvent(elem, exapndEvent);
}

function createEvent(name) {
    var event;

    if (document.createEvent) {
        event = document.createEvent("HTMLEvents");
        event.initEvent(name, true, true);
    } else {
        event = document.createEventObject();
        event.eventType = name;
    }

    return event;
}

function fireEvent(elem, event) {
    if (document.createEvent) {
        elem.dispatchEvent(event);
    } else {
        elem.fireEvent("on" + event.eventType, event);
    }
}

// subscribe to elemenet event
function subscribe(elem, eventName, callback) {
    if (elem.addEventListener) {
        elem.addEventListener(eventName, callback, false);
    } else if (elem.attachEvent) {
        elem.attachEvent(eventName, callback);
    }
}

// subscribe to expanded event
subscribe(document.getElementById('Proba'), 'expanded', function () {
    this.innerHTML = 'You did It!';
});

jsFiddle

Answer 3

这里的一部分问题是，当你使用它时，javascript本身并不是“有状态的”。每次单击时都不会重新评估您添加的if语句，它仅评估初始HTML的评估时间。

相反，您可能希望在扩展函数中有一些内容可以显示“你做过它”文本本身，或者调用另一个执行它的函数。您还可以向页面/脚本添加侦听器/事件，但这有点复杂。

第三个问题是你的平等检查。 expanded=true是一项任务，每次都将设置扩展为true。你的初始赋值var expanded = ...width='100%'也将宽度设置为100％，我不确定扩展将被设置为什么，可能是真的，因为该语句实际上并不是'falsey'或未定义，因为赋值是无效行动。

Answer 4

看看这个jsfiddle

http://jsfiddle.net/Auawr/

正如Juhana所说，由于您编写脚本的方式，执行顺序存在问题。

检查div是否展开应该在expand函数内或在expand之后调用的单独函数中。另请注意，使用一个等号（=）是赋值而不是等式检查

...
var  expanded = document.getElementById('Proba').style.width == '100%';
if (expanded==true) {
 alert("You did it!");    
}

...

Answer 5

不确定您在做什么，但请查看有关调整大小的w3c教程

http://www.w3schools.com/jsref/event_onresize.asp

Answer 6

您可以使用jQuery的.resize()函数。在您的代码中，这将是：

$("#div-id").resize(function(){ alert("You did it!"); });

当div在JavaScript调用函数中调整大小时

6 个答案:

代码

jsFiddle