重置小部件的所有CSS样式
Resetting all CSS styles for a widget
我正在创建一个使用许多自定义样式的Javascript小部件。当用户将小部件放在自己的页面上时,用户的页面总是会影响小部件的样式。有办法防止这种情况发生吗?
例如,如果我的小部件中有一个输入框:
<input id="#special-input" />
并且用户具有覆盖输入的样式:
input { width: 500px; }
然后,用户的页面将覆盖输入框的宽度。用户可以通过多种方式更改小部件的样式,我无法解释所有这些方式。例如,对于一个输入,我必须考虑边框、阴影、宽度、高度等,以及用户可以设置页面样式并影响我的小部件的任何其他方式。
要借鉴我上面的评论,你可以做下面这样的事情。(完全未经测试,很快就拼凑在一起了)这使用了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(或)$.css(map)<--获取每个样式声明
相关文章:
- 如果文本字段为空,则使用JavaScript应用CSS样式
- FF和Chromium中CSS样式按钮的外观差异
- CSS样式属性留空
- CKeditor预览插件.js,为Chrome和IE进行编辑.因为它拒绝CSS样式
- 基于路由的CSS样式-Angular2
- 为未标记的文本添加CSS样式
- 使用JQuery将现有CSS样式扩展%-%
- JavaScript-在keyDown上切换css样式
- React js应用程序's在托管应用程序中打开时将覆盖css样式
- 如何在javascript中更改段落中不同行的css样式
- 通过javascript设置IE特定的css样式
- PHP,MySQL,AJAX-调用AJAX结果后,Bootstrap CSS样式不会显示
- 使用javascript/jquery检查.css样式表的名称
- JavaScript和CSS样式不适用于我的“;谷歌网站”;页
- 未使用jQuery验证器选中Css样式复选框时
- javascript正则表达式,用于编辑元素内部的css样式属性
- css样式加载+id.例如加载1、加载300
- 无法在运行时将CSS样式添加到元素中
- d3js 通过其 CSS 样式选择所有元素
- 如何根据浏览器宽度动态调整 css 样式表