Question

我将MS翻译网页小部件包含在我的网络应用的一个页面中。

这是代码：

<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/中的两个css（WidgetLauncher.css和WidgetV3.css）在我的css之后调用，所以改变一些css属性值是没用的。

是否存在可能的解决方案？

Answer 1

任何标记为！important的css都将覆盖这些css文件。你试过了吗？

#LauncherTranslatePhrase{
    background-color: red !important;
}

Answer 2

如果您更具体地了解要更改的样式，那将会有所帮助，因为控件的不同部分采用不同的方式设置。

例如，按钮的背景颜色通过javascript设置为内联样式，但初始值由带有 MicrosoftTranslatorWidget 的跨度上的background-color属性控制（您可以使用已经设置为黑色。

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

您可以在样式表中设置如下：

，而不是使用内联样式

#MicrosoftTranslatorWidget {
  background-color:#000;
}

按钮上的文字颜色更难以覆盖。它通过选择器#MicrosoftTranslatorWidget *在Microsoft的样式表中设置。要覆盖该样式，您需要使用a more specific 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。

Answer 3

你能使用javascript解决方案吗？如果是这样，那么使用这样的代码直接操作元素的样式。以这种方式定义的规则会覆盖样式表中的任何内容，甚至是!important特异性。

window.onload = function(){
    document.getElementById("MicrosoftTranslaterWidget").style.backgroundColor = red;
}

Answer 4

不幸的是，似乎没有太多支持Microsoft Translator Widget。

以下是一些可能有用的链接：

开发人员 - http://www.microsoft.com/en-us/translator/developers.aspx
API - http://msdn.microsoft.com/en-us/library/dd576287.aspx
Web Widget API - http://msdn.microsoft.com/en-us/library/dn341983.aspx

此外，Microsoft支持（http://social.msdn.microsoft.com/Forums/en-US/e389bff3-fbd3-4405-82ca-71a03b66c2eb/design-the-ms-translater-widget）提及：

如果您需要更多的可自定义性，您可以随时使用AJAX API（这是构建小部件的基础）。

因此，您可以使用AJAX API自定义窗口小部件，尽管该帖子很旧（2009）。

AJAX API - http://msdn.microsoft.com/en-us/library/ff512385.aspx

如图所示，如果您需要覆盖CSS属性，最好使用 !important 。

更改css Microsoft Translator Web Page Widget

4 个答案: