只使用javascript來隱藏基於ALT TAG的元素？

我有一個wordpress網站，並且一個插件使用cufon文本替換。（我不完全確定它的實際方式，但並不重要）。只使用javascript來隱藏基於ALT TAG的元素？

我想只對特定的一兩個單詞使用「display：none」。例如，在移動主題上，我想將「聯繫我們」更改爲「聯繫人」。由於沒有課程或ID，因此只能通過使用alt標記來隱藏這個動態。

所以，我可以使用JavaScript來檢測ALT標籤「我們」並做一個顯示：無？下面的示例代碼。

<cufon class="cufon cufon-canvas" alt="Us" style="width: 20px; height: 14px; "><canvas width="32" height="17" style="width: 32px; height: 17px; top: -2px; left: -2px; "></canvas><cufontext>Us</cufontext></cufon>

來源

2012-07-26 user1424232

（我假設你有這樣的信息），你可以看看所有那些標記在文檔中並檢查alt屬性值。當你找到你正在尋找的特定元素時，你可以隨心所欲地做任何事情。在這個例子中，我改變了textContent屬性。

(function() { 
    var li = document.getElementsByTagName('li'); 

    for (var i = 0, length = li.length; i < length; i++) 
    { 
    if (li[i].getAttribute('alt') === 'two') 
     li[i].textContent = 'New Text'; 
    } 

}).call(this);

直播：http://jsbin.com/ixitut/2/edit

您還可以通過而不是改變document是一個更具體的標籤縮小這個搜索的範圍。

var searchWithin = document.getElementById(/**/) 
var tags = searchWithin.getElementsByTagName(/**/)

https://developer.mozilla.org/en/DOM/element.getElementsByTagName

來源

2012-07-26 21:12:41 travis

這是確切的輸出代碼替換IMG在document.getElementsByTagName：'<的Cufón類=」的Cufón的Cufón -canvas「alt =」Us「style =」width：20px; height：14px;「> Us'我無法讓你的工作。 – user1424232 2012-07-26 22:20:05

更新@travis，我在測試網站上看到了這段代碼。（函數（）{var（i = 0，length = li.length; i user1424232 2012-07-26 22:28:23

確認正在工作。謝謝。 – user1424232 2012-07-26 22:33:52

我們假設您正在討論圖片，因爲這是alt屬性唯一相關的地方。

上的所有cufon標籤使用.getAttribute()，則可以匹配字符串Us：如果你知道元素的尋訪的標籤

var cufons = document.getElementsByTagName("cufon"); 
// Loop over and look for the attr 
var num = cufons.length; 
for (var i=0; i<num; i++) { 
    // If it has an alt attr and matches Us inside word boundaries... 
    if (cufons[i].getAttribute('alt') && /\bUs\b/.test(cufons[i].getAttribute('alt'))) { 
    // set to display:none 
    cufons[i].style.display = "none"; 
    } 
}

來源

2012-07-26 21:04:56

其實，它不是圖像，它是cufon。 '我們' – user1424232 2012-07-26 22:17:12

然後，只需用的Cufón – 2012-07-26 22:49:35

我認爲你需要一個<a href="...">Contact Us</a>標籤的text改變Contact並確定link你需要使用一個標誌，並且在這種情況下，我認爲你可以使用rel attribute，即

<a href="#" rel="us">Contact Us</a>

和JavaScript來改變Contact Us到Contact您可以使用下面的代碼

var links=document.getElementsByTagName('a'); 
for(var i=0;i<links.length;i++) 
{ 
    var rel=links[i].getAttribute('rel'); 
    if(rel && rel.match(/^us$/i)) links[i].innerHTML='Contact'; 
}

DEMO。

或者不使用任何屬性，你可以只檢查a tag的innerHTML，如果它包含Contact US然後將其更改爲Contact如下

<a href="#">Contact Us</a>

和JavaScript來改變Contact Us到Contact您可以使用下面的代碼

var links=document.getElementsByTagName('a'); 
for(var i=0;i<links.length;i++) 
{ 
    var rel=links[i].innerHTML; 
    if(rel && rel.match(/^Contact Us$/i)) links[i].innerHTML='Contact'; 
}

DEMO。

更新：

我想，在默認情況下，你可以保持您的link text as Contact代替Contact Us並檢查是否沒有在任何移動設備（在桌面瀏覽器時），然後更改Contact到Contact Us使用javascript，即

var ismobile=navigator.userAgent.match(/(iPad)|(iPhone)|(iPod)|(android)|(webOS)/i); // May be these are not enough but only an example 
if(!ismobile){ 
    // one of above code snippets 
}

來源

2012-07-26 21:30:15

謝謝謝赫。我無法得到它，因爲我不能像你問的那樣改變文本。這裏是原始代碼' Us' – user1424232 2012-07-26 22:20:40

您正在使用jquery，對吧？ – 2012-07-26 22:22:00

只使用javascript來隱藏基於ALT TAG的元素？

回答

相關問題