Question

尝试添加＆＃39; X＆＃39; - 关闭谷歌地图标记按钮。标记在地图上显示较小，但在点击时会放大（相同的标记，只是增加大小）。我可以添加一个关闭按钮但无法使其工作（将尺寸缩小回原始尺寸）。需要动态添加解决方案。

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。请参阅小提琴：https://jsfiddle.net/gost1zLd/1/。

Answer 2

如果您使用单独的功能，则可以在start()功能中再次使用close()来重置原始样式。我已经重构了你的代码，希望它是自我解释的：

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

只有在设置问题时，您才会在start()上拨打close()时重新绑定所有内容。相反，尝试分离功能，问题就变得清晰了。

<强> DEMO

此外，您可以使用一些辅助函数来优化动态样式。您需要一个函数将文字对象转换为css字符串。你需要一个扩展对象的函数，类似于jQuery的$ .extend（），以便为两种状态（正常和大）一次设置样式（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中实现动态样式。

<强> DEMO

使用这种方法，您现在可以更轻松地“设计逻辑”，交叉引用HTML DOM style object。

动态添加关闭按钮（Javascript）

2 个答案: