2013-06-12 4 views
2

나는 무엇을해도 google translate 버튼에서 화살표를 제거하려고합니다. IE7 또는 IE8에서 제거 할 수 없으므로 미쳐 버릴 수 있습니다. 아래의 화살표의Google 번역 제거 화살표가 IE에서

이미지 : 나는 번역의 나머지 스타일을 할 수있었습니다하지만,이 화살표가 아무데도 안됩니다

arrow in google translate

. 코드 메신저 크롬 및 FF에 대한 사용 :

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

임 나는 마지막으로 아이를위한 지원을 추가하는 모든 다른 것들을 실행합니다. 모든 HTML이 유효하므로 쿼리 모드가 활성화되지 않습니다. jquery로도 타겟팅 할 수 없습니다. 너무 이상해.

도움이 될 것입니다.

죄송이에서를,이 구글 당신이 페이지에 넣어 원하는 것을되는 추가해야합니다

<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);">▼</span> 
    </a> 
</span> 
</div> 
</div> 
</div> 

과 마지막을 스팬 메신저 대상 :

<span style="color: rgb(155, 155, 155);">▼</span> 
+1

마크 업을 얻을 수 있으므로 작업 내용을 알고 있습니까? –

+0

님이 포함하도록 수정했습니다. 미안해 처음으로 포함되지 않았다. –

답변

2

변경하지 않습니다 생성되는 코드를 가정을 사용할 수 있습니다

하지만 아주 큰 해킹을 보인다
#google_translate_element span[style="color: rgb(155, 155, 155);"] { 
    display:none; 
} 

- Google에서이 코드를 직접로드하는 경우 코드가 미묘하게 변경되어 선택기가 손상 될 수 있다는 예측은 없습니다.

셀렉터로 #google_translate_element a>span:last-child을 사용하는 것이 더 정확한 "방법"일 수 있지만, 심지어 Google이 위젯의 ​​레이아웃을 변경하기로 결정할 수도 있습니다. 당신이이 요소에 도달하기 위해 사용하려고 시도하는 선택기는 그 점수에서 동일한 문제를 가질 것입니다.

접근 할 또 다른 각도는 자바 스크립트를 사용하여 문자열에서 아래쪽 화살표 문자를 찾아 교체하는 것일 수 있습니다. 이 같은 아마 뭔가 : 내가 위에서 설명하는 문제를 avoi하기 위해, 셀렉터와 너무 구체적으로하는 것을 피하기 수 있도록

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

여기 each() 사용.

그리고 나는 그 일을 오랫동안 해내는 방법처럼 보입니다. 그러나 나는 이벤트 핸들러를 깨뜨리는 것을 피하려고합니다. 그렇지 않으면 난 그냥 할 수 있었다 :

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

그러나 전체 DOM 다시, 그래서 그런 식으로 전 세계적으로 대체 할 대신 each() 방법을 사용하기 때문에 당신이 이벤트 처리기를 사용한다면 그 물건을 깰 것이다.

+0

이것들은 옳은 것 같지만 문제는 그럴 것 같습니다. 문서 뒤에로드됩니다. 따라서 설정된 시간 초과로 제거됩니다. 고맙습니다. (함수() { \t $ ('# google_translate_element .goog-TE-가제트 - 간단한 스팬 a.goog-TE 메뉴 값 범위 : 마지막으로 아이 에서는 setTimeout :.) (숨길) 내가 이것을 사용 ; \t}, 500); –

0

ie7과 8은 마지막 자식을 이해하지 못합니다 ... 만약 내가 당신이라면 나는 자바 스크립트 vi 조건부 주석 대상 ie8 이하, 그 다음 요소를 제거/숨 깁니다. jQuery를 가장 쉬운 방법이 될 것입니다, 당신은 당신이 이런 식으로 그것을 할 수는 jQuery를 마지막 아이 선택기

+0

또한 jQuery와 함께 실행될 때 last-child에 대한 지원을 추가하는 dom assist와 함께 selectizr을 실행합니다. 그다지 CSS 문제는 아닙니다. jquery로 의심 스팬을 찾을 수도 있습니다. –

+0

Google 스크립트가로드 될 때까지 실행을 기다리고 싶어합니다. 당신은 if 문을 감싸서 그 요소가 .length()를 사용하여 다음과 같이 있는지 검사 할 수 있습니다 : $ ('# googleElement'). 길이 – albert