1

多くのカスタム スタイルを使用する Javascript ウィジェットを作成しています。ユーザーが自分のページにウィジェットを配置すると、ユーザーのページは常にウィジェットのスタイルに影響します。これを防ぐ方法はありますか？

たとえば、ウィジェットに入力ボックスがある場合:

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

そして、ユーザーは入力をオーバーライドするスタイルを持っています:

input { width: 500px; }

次に、ユーザーのページが入力ボックスの幅をオーバーライドします。ユーザーがウィジェットのスタイルを変更できる方法はたくさんあるので、そのすべてを説明することはできません。たとえば、入力の場合、ボーダー、シャドウ、幅、高さなど、およびユーザーがページのスタイルを設定してウィジェットに影響を与えるその他の方法を考慮する必要があります。

4

1 に答える 1

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 (または) $.css(map) <-- すべてのスタイル宣言を取得する

于 2013-08-14T20:25:15.323 に答える