How can I use JavaScript to consistently fetch the CSS-defined percentage setting for padding/margin instead of the pixel size?

Question

How can I use JavaScript to consistently fetch the CSS-defined percentage setting for padding/margin instead of the pixel size?

How can I retrieve the padding set in CSS for a div with {padding:10% 10px 20% 10px;} using JavaScript, considering that window.getComputedStyle(myelement).getPropertyValue('padding'); returns different results?

In Firefox, it shows as "10% 10px 20% 10px"

Meanwhile, in Chromium, it displays as "59.8839px 10px 119.768px 2px"

Is there an alternative method to obtain this information so that the percentages are retrieved instead of the current pixel values?

Link to example

var div = document.getElementsByTagName('div')[0];
console.log(window.getComputedStyle(div).getPropertyValue('padding'));

javascript jquery css

Answer 1

Answer №1

Hello there, friend! I wanted to share an example with you that might be helpful. Basically, the function I tested retrieves the topBottom and leftRight property styles, splits them, and concatenates them in the correct order. I hope you find it useful.

function getPaddingCSS(selector) {
    const appElement = window.getComputedStyle(document.querySelector(selector), null);
    const elementPadding = {
        topBottom: appElement.paddingBlock,
        topBottomList: appElement.paddingBlock.split(' '),
        leftRight: appElement.paddingInline,
        leftRightList: appElement.paddingInline.split(' ')
    }
    const paddingStr = `${elementPadding.topBottomList[0]} ${elementPadding.leftRightList[1]} ${elementPadding.topBottomList[1]} ${elementPadding.leftRightList[0]}`;
    return paddingStr;
}
const selector = 'navbar';
const paddingCSS = getPaddingCSS(selector)
console.log('paddingStr of ' + selector.toUpperCase() + ':', paddingCSS)

.navbar{
    padding: 3% 15px 30% 60px;
}

<navbar class="navbar"> 
</navbar>

Answer 2

Hello there, friend! I wanted to share an example with you that might be helpful. Basically, the function I tested retrieves the topBottom and leftRight property styles, splits them, and concatenates them in the correct order. I hope you find it useful.

function getPaddingCSS(selector) {
    const appElement = window.getComputedStyle(document.querySelector(selector), null);
    const elementPadding = {
        topBottom: appElement.paddingBlock,
        topBottomList: appElement.paddingBlock.split(' '),
        leftRight: appElement.paddingInline,
        leftRightList: appElement.paddingInline.split(' ')
    }
    const paddingStr = `${elementPadding.topBottomList[0]} ${elementPadding.leftRightList[1]} ${elementPadding.topBottomList[1]} ${elementPadding.leftRightList[0]}`;
    return paddingStr;
}
const selector = 'navbar';
const paddingCSS = getPaddingCSS(selector)
console.log('paddingStr of ' + selector.toUpperCase() + ':', paddingCSS)

.navbar{
    padding: 3% 15px 30% 60px;
}

<navbar class="navbar"> 
</navbar>

How can I use JavaScript to consistently fetch the CSS-defined percentage setting for padding/margin instead of the pixel size?

Answer №1

Similar questions

Arrange the items that are missing from Array B to be located at the bottom of Array A, organized in a file tree structure

Web application using HTML5, AJAX, and a manifest file for offline usage

Tips for disabling selection in Kendo UI grid with jQuery

Employing delegate for switching roles between classes

Ways to store data in the localStorage directly from a server

What is the best way to ensure the navigation bar stays at the top of the window once it has reached

Encountered a 'Topology is closed' error while using EJS

Trouble arises when the properties of this.props are supposed to exist, yet they are not

What are some creative ways to provide video responses to a list of questions?

Allow users to select options after they click a radio button

Issue with fluid layout in CSS - Unable to specify height in pixels and minimum height property not functioning as expected

Mastering the extraction of key/value pairs from a JSON response in the OnComplete ajax

Guide to transforming a JSON file value into a JavaScript list

The validator function is causing an error with the 'lowerCase()' method resulting in an undefined output

ESLint error: EROFS read-only does not correspond to any directory

Utilizing Javascript to create interactive images in HTML

Obtain the hyperlink reference of a loop using Jquery

Guide to creating a vertical handler that can be resized

Error thrown in Node.js ReadSync call due to buffer length overflow

How can I gather information from members who have already signed up?