更改css Microsoft Translator網頁小部件

我在我的web應用程序的一個頁面中包含MS翻譯器網頁小部件。更改css Microsoft Translator網頁小部件

這是代碼：

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

它的工作原理，但微軟從http://www.microsofttranslator.com/static/187544/css/ 我的CSS後調用使用兩個CSS（WidgetLauncher.css和WidgetV3.css），所以也沒用改變一些CSS屬性的值。

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

來源

2013-07-26 Sefran2

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

這裏有一些鏈接，可能是有用的：

開發商 - http://www.microsoft.com/en-us/translator/developers.aspx
API - http://msdn.microsoft.com/en-us/library/dd576287.aspx
網頁的Widget API - http://msdn.microsoft.com/en-us/library/dn341983.aspx

此外，微軟支持（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

作爲，因爲它似乎醜陋，你可能會使用!important如果你需要覆蓋的CSS屬性會更好。

來源

2013-08-01 14:19:27 projeqht

任何標記爲！重要的css都會覆蓋這些css文件。你嘗試過嗎？

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

來源

2013-08-03 02:12:15

是的。另外MS css將一些屬性定義爲！important。但是，「奇怪」的是，如果我看到了html代碼，extern css會在我的之前被包含。 – Sefran2

如果你是更具體的瞭解你想改變，因爲控制的不同部分以不同的方式風格是什麼風格這將有助於。

例如按鈕的背景顏色設置爲通過JavaScript內聯樣式，但初始值由上跨度background-color屬性id爲MicrosoftTranslatorWidget（你已經設置爲黑色）控制。

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

你也可以使用一個!important規則，通過projeqht和法昆多科隆比耶的建議，但是這是作爲最後的手段通常是最好的離開了，不會總是足以應付。

例如，懸停背景色通過.TranslatePhrase:hover選擇器設置，但它已經使用!important規則，因此不足以覆蓋它。您需要使用具有更高特異性的選擇器以及!important規則來使您的樣式優先。

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

通常，您首先需要使用瀏覽器的Web檢查器來確定用於設置特定屬性的CSS選擇器。然後，您可以使用自己的選擇器，通過使用更高的特性和必要時的規則覆蓋它。

爲了幫助計算（並理解）CSS選擇器的特殊性，我強烈建議Keegan Street的Specificity Calculator。

來源

2013-08-03 13:16:59

你能使用javascript解決方案嗎？如果是這樣，那麼使用這樣的代碼直接操縱元素的樣式。用這種方式定義的規則可以覆蓋樣式表中的任何內容，即使是!important也是如此。

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

來源

2013-08-04 00:55:36

更改css Microsoft Translator網頁小部件

回答

相關問題