Use Javascript To Hide Element Based On ALT TAG Only?

I have a wordpress site, and a plugin uses cufon text replacement. (I'm not entirely sure the actual way it does this, but it's not important). I'd like to use a 'display:none' on

Solution 1:

If you know the tag of element your searching for (I assume you have this information) you can look up all those tags in the document and check the alt attribute value. When you find the particular element you're searching for you can do what ever you please with it. In this example I changed the textContent property.

(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);

Live: http://jsbin.com/ixitut/2/edit

You can also narrow the scope of this search by instead changing document to be a more specific tag.

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

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

Solution 2:

I think you need to change the text of an <a href="...">Contact Us</a> tag to Contact and to identify that link you need to use a flag and in that case I think you can use rel attribute, i.e.

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

and javascript to change Contact Us to Contact you can use the following code

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

Alternatively without using any attribute you can just check the innerHTML of the a tag and if it contains Contact US then change it to Contact as follows

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

and javascript to change Contact Us to Contact you can use the following code

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.

Update:

I think by default you can keep your link text as Contact instead of Contact Us and check if not in any mobile device (when in a desktop browser) then change the Contact to Contact Us using javascript, i.e.

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
}

Solution 3:

We assume you are talking about images, since that's the only place alt attributes are relevant.

Using .getAttribute() on all the cufon tags, you can match the string 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";
  }
}