1

我将 MS 翻译器网页小部件包含在我的 Web 应用程序的一页中。

这是代码：

<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>

它可以工作，但微软使用我的 css 之后调用的http://www.microsofttranslator.com/static/187544/css/WidgetLauncher.css中的两个 css (和 WidgetV3.css) ，因此更改一些 css 属性值是没有用的。

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

4

4 回答 4

1

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

#LauncherTranslatePhrase{
    background-color: red !important;
}
于 2013-08-03T02:12:15.013 回答
1

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

例如，按钮的背景颜色通过 javascript 设置为内联样式，但初始值由background-colorid 为MicrosoftTranslatorWidget的 span 上的属性控制（您已将其设置为黑色）。

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

除了使用内联样式，您还可以像这样在样式表中设置它：

#MicrosoftTranslatorWidget {
  background-color:#000;
}

按钮上的文本颜色覆盖起来更复杂。它是通过选择器在 Microsoft 的样式表中设置的#MicrosoftTranslatorWidget *。要覆盖该样式，您需要使用更具体的选择器，例如：

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 的Speciality Calculator。

于 2013-08-03T13:16:59.580 回答
1

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

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

不幸的是，微软翻译小部件似乎没有太多支持。

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

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

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

因此，您也许可以使用 AJAX API 自定义小部件，尽管那篇文章已经很老了（2009 年）。

尽管看起来很丑陋，但!important如果您需要覆盖 CSS 属性，最好使用它。

于 2013-08-01T14:19:27.197 回答