fredbird.org

il faut toujours se méfier des évidences en ce qu'elles n'apportent jamais la preuve de la vérité qu'elles nous assènent.

-- Agnès Maillard

fil atom des web logs

Some CSS-related javascript utility functions

Hi folks. Nothing very bright or revolutionary, but here is a tiny library to play with CSS and javascript. More elaborate tricks to come. Hope it helps.

  • bool hasClass(DOM obj, string cName)
  • bool hasClasses(DOM obj, array classes)
  • bool addClass(DOM obj, string cName)
  • bool removeClass(DOM obj, string cName)
  • bool swapClasses(DOM obj, string class1, string class2)
  • bool switchClass(DOM obj, string to, string from)
  • array getElementsByClassName(string className, [DOM container],[string tag])
/* CSS-related javascript functions by Fred Bird http://fredbird.org License : Public Domain file version 16/09/2005 09:30:45 */ /* has the DOM object a certain class ? obj = DOM object, cName = a class name */ function hasClass(obj,cName) { return new RegExp('\\b'+cName+'\\b').test(obj.className); } /* has the DOM object a set of classes ? obj = DOM object, classes=array of class names */ function hasClasses(obj,classes) { for (f=0; f<classes.length; f++) { if (!hasClass(obj,classes[i])) return false; } return true; } /* add a class to a DOM object if necessary obj = DOM object, cName = a class name */ function addClass(obj,cName) { if (!hasClass(obj,cName)) { obj.className+=obj.className?' '+cName:cName; } return true; } /* removes a class from a DOM object obj = DOM object, cName = a class name */ function removeClass(obj,cName) { if (!hasClass(obj,cName)) return false; var rep=obj.className.match(' '+cName)?' '+cName:cName; obj.className=obj.className.replace(rep,''); return true; } /* swap two classes for a DOM object, whatever provided order */ function swapClasses(obj,class1,class2) { if (hasClass(obj,class1)) { removeClass(obj,class1); addClass(obj,class2); return true; } if (hasClass(obj,class2)) { removeClass(obj,class2); addClass(obj,class1); return true; } return false; } /* sets class 'to' to the DOM object obj, removes class 'from' if necessary */ function switchClass(obj,to,from) { if (hasClass(obj,from)) removeClass(obj,from); addClass(obj,to); return true; } /* returns an array of DOM objects having the provided class name within object 'container' and with tag name 'tag' some code from http://www.webmasterworld.com/forum91/1757.htm (unbugged) */ function getElementsByClassName(className,container,tag) { // default container to document container=container||document; // default tag to * tag=tag||'*'; // listing container descendants var all = container.all||container.getElementsByTagName(tag); var found=new Array(); // searching for targets for (f=0; f<all.length; f++) { var el=all[f]; if (hasClass(all[f],className)) { found.push(all[f]); } } return found; }
Fred Bird Octidi 28 Fructidor an 213

In Reference to page fredbird.org/lire/log/2005-09-16-javascript-css-functions

The regexp "'\\b'+cName+'\\b'" is not right - use "'(\\s|^)'+cName+'(\\s|$)'" instead.

Otherwise you will not be able to use the '-' char in any class name. I made this same mistake myself...

binnyva.blogspot.com/2005/12/my-custom-javascript-functions.html

Binny url 08/07/2006

Thank you for the patch !

I was not aware that '-' was allowed in class names in javascript, as it's not allowed in PHP which is my primary language - for programming, that is.

Fred Bird 08/07/2006
Commenter

Le monde est grand, le web le rétrécit. Un point de vue libertaire sur le vaste monde et nos petites vies.

Thèmes traités : politique, web & informatique, espace, Amérindiens, société, culture etc

Tous les contenus Accueil presence status jabber

Contenus similaires

Souscriptions

+ rojo + bloglines + Google reader + My Yahoo + del.icio.us add blogmarks add netvibes

Pub

Ouvaton, hébergeur coopératif Firefox Framasoft Ubuntu