In order to access this site you need to enable JavaScript!

You are here: Reference > JavaScript > client-side > style handling > properties > pixelWidth

pixelWidth property

Browser support:

Specifies or retrieves the value of the width style property, in pixels.

With the width style property you can set or return the width of an element with a unit designator as a string. The pixelWidth property specifies or retrieves the width as an integer, in pixels. When the value of the pixelWidth property is set, the unit type of the width style property is not changed. The value will be converted to the current unit type of the width style property. If you want to set or retrieve the width as a floating-point number that specifies the value in the current unit type of the width style property, use the posWidth property.

The properties mentioned above can be used to access style settings. If you need the width of a rendered element, you can use the clientWidth, offsetWidth and scrollWidth properties and the getBoundingClientRect method.

The currentStyle.pixelWidth property is read-only, all others are read/write.

Syntax:

object.pixelWidth;

You can find the related objects in the Supported by objects section below.

Possible values:

Integer that sets or retrieves the width of the object, in pixels.

Default: this property has no default value.

Example HTML code 1:

This example illustrates the use of the pixelWidth property:

<head>
    <script type="text/javascript">
        function GetWidth (elem) {
            var widthStyle = elem.style.width;
            var widthPx = elem.style.pixelWidth;
            var widthPos = elem.style.posWidth;
            alert ("The width of the button: " + widthStyle +
                   "\n without unit type: " + widthPos + 
                   "\n in pixels: " + widthPx);
        }
    </script>
</head>
<body>
    <button style="width:40%; height:10%;" 
            onclick="GetWidth (this);">Get the width!</button>
</body>