addClass(element:HTMLElement, value: String);
element. DOM element to which you need to add a CSS class.
value. Name of CSS class.
The addClass method adds CSS class to a specified DOM tree element.
To execute the example, add a link to PP.js and jquery.js scenario files to HTML page. Create a DOM node based on specified string containing HTML markup, specify the programText CSS class for <div> block and add the node to document. Now define margins and border settings for the node, and determine coordinates of the DOM node:
// Determine string with markup
var markup = "<div id='main'>12</div>";
// Transform string to DOM node
var dom = PP.htmlToDOM(markup, false);
// Add class to block
PP.addClass(dom, "programText");
// Add DOM node to document
document.body.appendChild(dom);
if (PP.hasClass(dom, "programText")) {
// Set styles for this class
$("div.programText").css("margin", "20px");
$("div.programText").css("border", "1px dashed");
// Determine document border style
$("body").css("border", "1px solid");
// Determine DOM node coordinates
var position = PP.calculateOffset(dom);
console.log("DOM node coordinates: (" + position.X + ", " + position.Y + ")");
} else {
console.log("The "programText" CSS class is not found.");
};
After executing the example a based on HTML markup DOM node is created and added to document. The programText CSS class is specified for the <div> block that is a root of the created tree, margins equal to 20 pixels are set, and the border is shown as a dashed line with the size equal to 1 pixel:
The browser console displays coordinates of the created DOM node:
DOM node coordinates: (28, 20)
See also: