javascript - 动态添加关闭按钮(Javascript)

Question

尝试为谷歌地图标记添加“X” - 关闭按钮。标记在 map 上会显示很小，但在单击时会放大(相同的标记，只是增加了大小)。我可以添加一个关闭按钮，但无法使其正常工作(将尺寸缩小回原来的尺寸)。请动态添加解决方案。

fiddle :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。参见 fiddle :https://jsfiddle.net/gost1zLd/1/ .