1

MS トランスレータ Web ページ ウィジェットを Web アプリの 1 ページに含めます。

これはコードです：

<span id='MicrosoftTranslatorWidget' class='Dark' style='color:white;background-color:#000;'></span>

   <script type='text/javascript'>
   setTimeout(function(){{
      var s=document.createElement('script');
      s.type='text/javascript';
      s.charset='UTF-8';
      s.src=((location && location.href && location.href.indexOf('https') == 0)?'https://ssl.microsofttranslator.com':'http://www.microsofttranslator.com')+'/ajax/v3/WidgetV3.ashx?siteData=ueOIGRSKkd965FeEGM5JtQ**&ctf=False&ui=true&settings=Manual&from=en';
      var p=document.getElementsByTagName('head')[0]||document.documentElement;
      p.insertBefore(s,p.firstChild); }},0);
   </script>

動作しますが、Microsoft はhttp://www.microsofttranslator.com/static/187544/css/WidgetLauncher.cssの 2 つの css (と WidgetV3.css) を 私の css の後に呼び出すので、一部の css プロパティ値を変更しても意味がありません。

可能な解決策はありますか？

4

4 に答える 4

1

JavaScript ソリューションを使用できますか? その場合は、このようなコードを使用して要素のスタイルを直接操作します。このように定義されたルールは、スタイルシートのすべてをオーバーライドします!important。

window.onload = function(){
    document.getElementById("MicrosoftTranslaterWidget").style.backgroundColor = red;
}
于 2013-08-04T00:55:36.307 に答える
1

コントロールのさまざまな部分がさまざまな方法でスタイル設定されているため、変更したいスタイルをより具体的にすると役立ちます。

たとえば、ボタンの背景色は JavaScript を介してインライン スタイルとして設定されますが、初期値はID MicrosoftTranslatorWidget (既に黒として設定されている) をbackground-color持つスパンのプロパティによって制御されます。

<span id='MicrosoftTranslatorWidget' class='Dark'
  style='color:white;background-color:#000;'></span>

インライン スタイルを使用する代わりに、次のようにスタイルシートに設定することもできます。

#MicrosoftTranslatorWidget {
  background-color:#000;
}

ボタンのテキストの色は、オーバーライドがより複雑です。selector を介して Microsoft のスタイルシートに設定されます#MicrosoftTranslatorWidget *。そのスタイルをオーバーライドするには、より具体的な selectorを使用する必要があります。たとえば、次のようなものです。

span#MicrosoftTranslatorWidget * {                       
  color:white;
}

projeqhtとFacundo Colombier!importantで提案されているように、ルールを使用することもできますが、通常は最後の手段として残しておくのが最善であり、とにかく常に十分であるとは限りません。

たとえば、ホバーの背景色は.TranslatePhrase:hoverセレクターを介して設定されますが、既に!importantルールを使用しているため、それをオーバーライドするには十分ではありません。!importantスタイルを優先させるルールだけでなく、より特異性の高いセレクターを使用する必要があります。

div.TranslatePhrase:hover {
  background-color:blue !important;
}

一般に、最初にブラウザーの Web インスペクターを使用して、特定のプロパティの設定に使用されている CSS セレクターを特定する必要があります。!important次に、より高い特異性と、必要に応じてルールを使用して、独自のセレクターでオーバーライドできます。

CSS セレクターの特異性を計算 (および理解) するには、Keegan Street のSpecificity Calculatorを強くお勧めします。

于 2013-08-03T13:16:59.580 に答える