Javascript 重置小部件的所有CSS样式

我正在创建一个Javascript小部件，它使用许多自定义样式。当用户将小部件放置在其页面上时，用户的页面始终会影响小部件的样式。有没有办法防止这种情况

例如，如果我的小部件中有一个输入框：

<input id="#special-input" />

---

然后，用户页面将覆盖输入框的宽度。用户可以通过多种方式更改小部件的样式，我无法解释所有这些方式。例如，对于输入，我必须考虑边框、阴影、宽度、高度等，以及用户可以设置页面样式并影响我的小部件的任何其他方式。

要利用我上面的评论，可以执行以下操作。这完全没有经过测试，并且很快就组合在一起，它使用Jquery，但是我相信如果您使用另一个库或纯JS，您可以找到如何修改它的方法

var allStyles = ["azimuth","background","backgroundAttachment","backgroundColor","backgroundImage","backgroundPosition","backgroundRepeat","border","borderBottom","borderBottomColor","borderBottomStyle","borderBottomWidth","borderCollapse","borderColor","borderLeft","borderLeftColor","borderLeftStyle","borderLeftWidth","borderRight","borderRightColor","borderRightStyle","borderRightWidth","borderSpacing","borderStyle","borderTop","borderTopColor","borderTopStyle","borderTopWidth","borderWidth","bottom","captionSide","clear","clip","color","content","counterIncrement","counterReset","cssFloat","cue","cueAfter","cueBefore","cursor","direction","display","elevation","emptyCells","font","fontFamily","fontSize","fontSizeAdjust","fontStretch","fontStyle","fontVariant","fontWeight","height","left","letterSpacing","lineHeight","listStyle","listStyleImage","listStylePosition","listStyleType","margin","marginBottom","marginLeft","marginRight","marginTop","markerOffset","marks","maxHeight","maxWidth","minHeight","minWidth","orphans","outline","outlineColor","outlineStyle","outlineWidth","overflow","padding","paddingBottom","paddingLeft","paddingRight","paddingTop","page","pageBreakAfter","pageBreakBefore","pageBreakInside","pause","pauseAfter","pauseBefore","pitch","pitchRange","playDuring","position","quotes","richness","right","size","speak","speakHeader","speakNumeral","speakPunctuation","speechRate","stress","tableLayout","textAlign","textDecoration","textIndent","textShadow","textTransform","top","unicodeBidi","verticalAlign","visibility","voiceFamily","volume","whiteSpace","widows","width","wordSpacing","zIndex"];

    $.each(allStyles, function(key, value){
        if ($this.css(value) !== undefined){
            $this.css(key, "")
        }
    });

---

注：我上面的帖子是根据另一个主题的答案修改的。只是想表扬@Matrym。。。getComputedStyle或$.cssmap是指向broad的方式。请提供一些正在发生的事情的示例。内联声明样式：。那么最终用户就必须显式地使用！重要的是要覆盖它们。另一个提示：使用其他网页不太可能使用的特定id和类。已编辑。即使我内联声明样式，也有许多CSS属性会间接影响我的小部件的CSS。如果用户设置了一个input:hover-CSS属性，最终会影响我的小部件，该怎么办？有太多的事情要担心了。这可能有点过分，但这是我唯一能想到的。您可以在小部件的特定元素上使用window.getComputedStyle，遍历结果，然后清除它找到的所有样式。一旦这样做了，应用你的风格，你应该很好去。只需确保针对您的特定元素，这样您就不会最终将整个页面擦除干净。。。

var allStyles = ["azimuth","background","backgroundAttachment","backgroundColor","backgroundImage","backgroundPosition","backgroundRepeat","border","borderBottom","borderBottomColor","borderBottomStyle","borderBottomWidth","borderCollapse","borderColor","borderLeft","borderLeftColor","borderLeftStyle","borderLeftWidth","borderRight","borderRightColor","borderRightStyle","borderRightWidth","borderSpacing","borderStyle","borderTop","borderTopColor","borderTopStyle","borderTopWidth","borderWidth","bottom","captionSide","clear","clip","color","content","counterIncrement","counterReset","cssFloat","cue","cueAfter","cueBefore","cursor","direction","display","elevation","emptyCells","font","fontFamily","fontSize","fontSizeAdjust","fontStretch","fontStyle","fontVariant","fontWeight","height","left","letterSpacing","lineHeight","listStyle","listStyleImage","listStylePosition","listStyleType","margin","marginBottom","marginLeft","marginRight","marginTop","markerOffset","marks","maxHeight","maxWidth","minHeight","minWidth","orphans","outline","outlineColor","outlineStyle","outlineWidth","overflow","padding","paddingBottom","paddingLeft","paddingRight","paddingTop","page","pageBreakAfter","pageBreakBefore","pageBreakInside","pause","pauseAfter","pauseBefore","pitch","pitchRange","playDuring","position","quotes","richness","right","size","speak","speakHeader","speakNumeral","speakPunctuation","speechRate","stress","tableLayout","textAlign","textDecoration","textIndent","textShadow","textTransform","top","unicodeBidi","verticalAlign","visibility","voiceFamily","volume","whiteSpace","widows","width","wordSpacing","zIndex"];

    $.each(allStyles, function(key, value){
        if ($this.css(value) !== undefined){
            $this.css(key, "")
        }
    });