How to use zjrJS.Doc.aCl() ("add class")
Declaration
Goal
A cross-browser method to add CSS classes to elements. aCl() ensures className exist only once in the Target's class attribute, removing any doubles.
Typical usage
Wherever CSS classes need to be added to elements.
Member Type
Function.
Value Type
Before November 27, 2011: Object (the Target HtmlElement), when both className and Target were supplied, otherwise null.
After November 27, 2011: Object (the Target HtmlElement), allowing for continuation.
Parameters
String className: any valid CSS class name to add. Mind you that you are responsible for choosing names that work.
HtmlElement Target: the element (either generated (Doc.cE() or document.createElement()) or retrieved (Doc.eid() or document.getElementByID() etc.)) which should receive the className.
Dependencies
zjrJS.Doc.dCl()
Example
zjrJS.Doc.aCl(String className, HtmlElement Target)Goal
A cross-browser method to add CSS classes to elements. aCl() ensures className exist only once in the Target's class attribute, removing any doubles.
Typical usage
Wherever CSS classes need to be added to elements.
Member Type
Function.
Value Type
Before November 27, 2011: Object (the Target HtmlElement), when both className and Target were supplied, otherwise null.
After November 27, 2011: Object (the Target HtmlElement), allowing for continuation.
Parameters
String className: any valid CSS class name to add. Mind you that you are responsible for choosing names that work.
HtmlElement Target: the element (either generated (Doc.cE() or document.createElement()) or retrieved (Doc.eid() or document.getElementByID() etc.)) which should receive the className.
Dependencies
zjrJS.Doc.dCl()
Example
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="zjrJS.version.js" id="zjrJS"></script>
<script type="text/javascript">/* <![CDATA[ */
zjrJS.Doc.aE(window,"load",function(){
//reference the Doc object
var P,D=zjrJS.Doc;
//retrieve an HtmlParagraphElement
P=D.eid("chooseMe");
if(P){
//add 1 class
P=D.aCl("oneClass",P).
//add 2 more CSS classes
P=D.aCl("bigFont",D.aCl("redBack",P)).
}
//clean up memory
D=P=null;
});
/* ]]> */</script>
<style type="text/css">/* <![CDATA[ */
body{font-size:medium}
.smallFont{font-size:smaller}
.bigFont{font-size:larger}
.redBack{background:red;color:white}
/* ]]> */</style>
</head>
<body>
<p>The text size of this paragraph is medium.</p>
<p class="smallFont">The text size of this paragraph should look smaller.</p>
<p id="chooseMe">The text size of this paragraph should look bigger and white on red, but only if javascript is enabled.</p>
</body>
</html>