PP.Ui.getPixelSize

Syntax

PP.Ui.getPixelSize(el: HTMLElement, stylewidth: String);

Parameters

el. HTML Item.

stylewidth. Style name.

Description

The getPixelSize method returns size value of the item style in pixels.

Example

To execute the example, the HTML page must contain links to PP.js script file and to PP.css styles file in the <body> tag of the HTML page of the <div> item with the button identifier. In the onload event of the <body> tag it is necessary to specify the call of the createButton() function. Add the button on the page:

var button;
function createButton() {
    // Create button
    button = new PP.Ui.Button({
        // Set parent item
        ParentNode: document.getElementById("button"),
        // Set button contents
        Content: "Button",
    });
}

Get button width in pixels:

// Get button width
console.log("Button width: " + PP.Ui.getPixelSize(button.getDomNode(), "width"));

As a result, button width is displayed in the console:

Button width: 61

Get text width of the button contents:

// Get text width of the button contents
console.log("Text width of the button contents: " + PP.Ui.getWidthOfElement(button.getContent(), button.getDomNode()));

As a result, text width of the button contents is displayed in the console:

Text width of the button contents: 39

Get sums of button paddings and borders height and width:

// Get total height (in pixels) of button paddings and borders
console.log("Total height of button paddings and borders: " + PP.Ui.getBordersHeight(button.getDomNode()));
// Get total width (in pixels) of button paddings and button borders
console.log("Total width of button paddings and borders: " + PP.Ui.getBordersWidth(button.getDomNode()));

As a result, the console displays the total width and height of button paddings and borders:

Total height of button paddings and borders: 6

Total width of button paddings and borders: 6

Get total width and total height of button paddings, margins and borders:

console.log("Total height of button paddings, margins and borders: " + PP.Ui.getMarginsHeight(button.getDomNode()));
// Get total width (in pixels) of button paddings, margins and borders
console.log("Total width of button paddings, margins and borders: " + PP.Ui.getMarginsWidth(button.getDomNode()));

As a result, th console displays total width and height of button paddings, margins and borders:

Total height of button paddings, margins and borders: 6

Total width of button paddings, margins and borders: 6

Get button width without taking into account paddings, margins and borders:

// Get button width (in pixels) without taking into account paddings, margins and borders
console.log("Button width without taking into account paddings, margins and borders: " + PP.Ui.getOffsetWidthNoMargins(button.getDomNode()));

As a result, the console displays button width without taking into account paddings, margins and borders:

Button width without taking into account paddings, margins and borders: 55