只使用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的元素？

回答

相关问题