重置窗口小部件的所有CSS样式

时间:2013-08-14 19:38:01

标签: javascript html css

我正在创建一个使用许多自定义样式的Javascript小部件。当用户将小部件放在他的页面上时,用户的页面总是会影响小部件的样式。有办法防止这种情况吗?

例如,如果我的小部件中有一个输入框:

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

并且用户具有覆盖输入的样式:

input { width: 500px; }

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

1 个答案:

答案 0 :(得分:0)

为了回顾上面的评论,你可以做类似下面的事情。 (完全未经测试并快速抛出)这使用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 (or) $.css(map) <-- to get every style declaration