Here’s a quick JavaScript helper snippet to get the inner width (excluding padding) of an element in the DOM.
Written in TypeScript.
/** * Return the calculated inner width of an element. * Returns -1 if width is unknown. * @param elementID ID of the element to calculate the width for. Set to "" to use elementClassName * @param elementClassName CSS class name on the element to calcualte the width for. Ignored if elementID is provided. */ public static GetElementInnerWidth(elementID: string, elementClassName: string): number { let width: number = -1; let element: any = null; // Get the DOM element to check, if (elementID !== "") { // Lookup by element ID. let elementByID = document.getElementById(elementID); if (elementByID !== undefined) { element = elementByID; } } else { // Lookup by CSS class name. Use first found node as actual element. let elementByClass = document.querySelectorAll("." + elementClassName); if (elementByClass !== undefined && elementByClass && elementByClass[0]) { element = elementByClass[0]; } } if (element !== null) { // The outer width of the element width = element.clientWidth; // Get the calculated padding so we can remove it. let paddingLeft = ComponentHelpers.TryParseInt(window.getComputedStyle(element, null).getPropertyValue("padding-left"), 0); let paddingRight = ComponentHelpers.TryParseInt(window.getComputedStyle(element, null).getPropertyValue("padding-right"), 0); // Innerwidth = outerwidth - padding width = width - (paddingLeft + paddingRight); } return width; }