Question

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 only a specific word or two. For example, on the mobile theme, I’d like to change “Contact Us” to only “Contact”. The only way to hide this on the fly is by using the alt tag since there is no class or ID.

So can I use JavaScript to detect the alt tag “Us” and do a display:none? Sample code below.

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

Answer 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