动态添加一个关闭按钮(Javascript)

Question

尝试为谷歌地图标记添加一个" X " -关闭按钮。标记在地图上显示小，但点击后会放大(相同的标记，只是增加大小)。我可以添加一个关闭按钮，但不能让它工作(缩小到原来的大小)。请动态添加解决方案。

小提琴:https://jsfiddle.net/gost1zLd/

var div = document.createElement('div');
div.style.width = '100px';
div.style.height = '100px';
div.style.background = 'black';
var img = document.createElement('img');
img.style.width = '100%';
img.style.height = '100%';
img.src = '';
var exit = document.createElement('div');
function large()
{
    div.classList.add("large");
    if (div.className == "large")
    {
        div.style.width = '300px'; 
        div.style.height = '300px';
        exit.innerText = 'X';
        exit.style.width = '20px';
        exit.style.height = '20px';
        exit.style.fontSize = 'xx-large';
        exit.style.fontWeight = 'bold';
        exit.style.color = 'white';
        exit.style.position = 'absolute';
        exit.style.top = '5px';
        exit.style.left = '265px';
    }
}
function close()
{
    div.classList.remove("large");
}
document.body.appendChild(div);
div.appendChild(img);
div.appendChild(exit);
div.addEventListener('click', large, false);
exit.addEventListener('click', close, false);
}       

Answer 1

问题是，删除类large并不足以重置<div>到其原始状态，因为类large本身是没有意义的，因为它没有CSS定义。我的建议是将样式转换为CSS而不是JavaScript。

Answer 2

如果你做了单独的函数，你可以在你的close()函数中再次使用start()来重置原来的样式。我已经重构了你的代码，希望它是不言自明的:

function close () {
    div.classList.remove("large");
    start();
}

设置的唯一问题是，当您在close()上调用start()时，您将重新绑定所有内容。相反，尝试将功能分开，问题就会变得清晰。

此外，您可以使用一些辅助函数来优化动态样式。您需要一个函数将文字对象转换为css字符串。您需要一个函数来扩展对象，类似于jQuery的$.extend()，以便同时为两种状态(normal和large)设置样式(doc)。

this.divStyle = convertLiteralToQs(cfg.div.style);
this.divLarge = convertLiteralToQs(extend(cfg.div.style, cfg.div.large));
this.div.style.cssText = this.divStyle; // normal style
this.div.style.cssText = this.divLarge; // large style

这将加快JavaScript中动态样式的浏览器流。

使用这种方法，你现在可以更容易地"样式你的逻辑"交叉引用HTML DOM样式对象