如何在 IE9 中为 classList 错误使用 shim？答案

【问题标题】：How do I use a shim for a classList error in IE9?如何在 IE9 中为 classList 错误使用 shim？
【发布时间】：2018-02-11 03:21:54
【问题描述】：

我试图在按下图标时弹出图像。图像有一个十字架，然后我用它来关闭图像。在 ie10 中这有效，但在 ie9（和 ie8）中，我得到了 classList 的错误。我尝试了各种垫片，但错误仍然存在。不确定我是否正确使用了垫片。

function myPopFunction(elem) {
var popup = document.getElementById(elem.id+"a");
popup.classList.toggle("showpop");

无法获取未定义或空引用的属性“切换”

HTML 是：

<div class="popup" onclick="myPopFunction(this)" id="myPop1">
<img src="Images/Slightly%20Smile.png" width="15">
<span class="popupimage" id="myPop1a">
    <div style="position: relative;">
        <img src="Images/dilbert_agile_programming.gif">
        <img src="Images/Cross%20hair%20white%20border%20small.png" class="dropshadow" width="25">
    </div>
</span>

CSS 是：

.dropshadow {
border-radius:50%; 
box-shadow: 5px 5px 3px #888888;
position:absolute;
top:-10px; 
right:-10px;    
}

.popup {
position: relative;
display: inline-block;
cursor:pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.popup .popupimage {
visibility: hidden;
position: absolute;
z-index: 1;
top:100%;
left: -320px;  
}
.popup .showpop {
visibility: visible;
-webkit-animation: fadeIn 1s;
animation: fadeIn 1s;
}

@-webkit-keyframes fadeIn {
from {opacity: 0;} to {opacity: 1;}
}
@keyframes fadeIn {
from {opacity: 0;} to {opacity:1 ;}

【问题讨论】：

使用 shim 的代码是什么样的？
这是在标题中
不确定其中哪一个是垫片。是“js/classList.js”吗？您应该发布所有涉及的代码。
是的 classList.js 是垫片
垫片位于gist.github.com/nathanmacinnes/9283428

标签： javascript html popup shim

【解决方案1】：

尝试使用这个 polyfill：

https://github.com/Financial-Times/polyfill-service/blob/master/polyfills/Element/prototype/classList/polyfill.js

这对 IE8 和 IE9 工作正常，但对 IE10 和 IE11 不工作。

【讨论】：

谢谢。我应该把这个垫片放在哪里或如何使用它？

【解决方案2】：

我设法让它在 iE9 中工作。将代码更改为：

function myPopFunction(elem) {
var popup = document.getElementById(elem.id+"a");
var cl=classList(popup);
cl.toggle("showpop");
}

我刚刚意识到我实际上也希望它在 IE7 中工作。我在上面发布的链接的 classList.js 垫片在 ie7 中不起作用。

【讨论】：