2

Google翻訳ボタンから矢印を削除しようとしていますが、何をしても、IE7またはIE8から矢印を削除できず、夢中になります。

以下の矢印の画像:

Google翻訳の矢印

残りの翻訳のスタイルを設定できましたが、この矢印はどこにも行きません。ChromeとFFに使用するコードは次のとおりです。

div#google_translate_element div.goog-te-gadget-simple a.goog-te-menu-value span:last-child

私はmodernizrと他のすべてのものを実行して、最後の子のサポートを追加しています。すべての HTML が有効であるため、querks モードはアクティブ化されていません。jqueryでターゲットにすることさえできません。とても奇妙です。

どんな助けでも素晴らしいでしょう。

申し訳ありませんが、これを追加する必要がありました。これは、Google がページに追加してほしいものです。

    <div id="google_translate_element"></div>
<script type="text/javascript">
                                                    function googleTranslateElementInit() {
                                                      new google.translate.TranslateElement({pageLanguage: 'en', includedLanguages: 'de,es,fr,pl,zh-CN,zh-TW', layout: google.translate.TranslateElement.InlineLayout.SIMPLE, multilanguagePage: true}, 'google_translate_element');
                                                    }
                                                    </script><script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

そして、これが吐き出すものです：

<div id="google_translate_element">
<div class="skiptranslate goog-te-gadget" dir="ltr" style="">
<div id=":0.targetLanguage" class="goog-te-gadget-simple" style="white-space: nowrap;">
<img src="http://www.google.com/images/cleardot.gif" class="goog-te-gadget-icon" style="background-image: url(http://translate.googleapis.com/translate_static/img/te_ctrl3.gif); background-position: -65px 0px;">
<span style="vertical-align: middle;">
    <a class="goog-te-menu-value" href="javascript:void(0)">
    <span>Select Language</span>
    <img src="http://www.google.com/images/cleardot.gif" width="1" height="1">
    <span style="border-left-width: 1px; border-left-style: solid; border-left-color: rgb(187, 187, 187);">&#8203;</span>
    <img src="http://www.google.com/images/cleardot.gif" width="1" height="1">
    <span style="color: rgb(155, 155, 155);">▼&lt;/span>
    </a>
</span>
</div>
</div>
</div>

そして、ターゲットにしようとしている最後のスパン:

<span style="color: rgb(155, 155, 155);">▼&lt;/span>
4

2 に答える 2

2

生成されるコードが変更されないと仮定すると、次のようにすることができます。

#google_translate_element span[style="color: rgb(155, 155, 155);"] {
    display:none;
}

ただし、これは非常に大きなハックのように思えます。このコードを Google から直接読み込んでいる場合、彼らがコードを微妙な方法で変更してセレクターを壊す可能性があるとは予測できません。

セレクターとして使用#google_translate_element a>span:last-childする方がより「正しい」方法かもしれませんが、それでも Google がウィジェットのレイアウトを変更することを決定する可能性があります。この要素に到達するために使用しようとするほとんどすべてのセレクターは、そのスコアで同じ問題を抱えています。

アプローチする別の角度は、javascript を使用して、文字列から下矢印文字を見つけて置き換えることです。多分このようなもの：

$("#google_translate_element a span").each(function() {
    $(this).html($(this).html().replace(/▼/,""));
});

ここで使用each()することで、上記の問題を回避するために、セレクターを具体的にしすぎないようにすることができます。

そして、それが長い道のりのように見えることはわかっていますが、イベント ハンドラーを壊さないようにしています。そうでなければ、私はただできたはずです：

document.body.innerHTML = document.body.innerHTML.replace(/▼/,"");

ただし、イベント ハンドラーを使用している場合は、DOM 全体が再構築されるため、問題が発生するため、each()代わりにメソッドを使用して、そのようにグローバルに置換を行います。

于 2013-06-12T20:14:03.300 に答える
0

ie7 と 8 は最後の子を理解していません... もし私があなただったら、条件付きコメント ターゲット ie8 以下を介して JavaScript を挿入し、要素を削除/非表示にします。jQueryが最も簡単で、jQueryの最後の子セレクターを使用できます

于 2013-06-12T19:46:45.133 に答える