Determining the pixel padding of an element that was initially set with a percentage value

I am working with a div element that has left padding assigned as a percentage, like so:

padding-left: 1%;

However, I need to obtain the value of this padding in pixels for some calculations after the window has been resized. When using JavaScript to check element.style.paddingLeft, it only returns the original value "1%". How can I accurately get the actual amount of padding in pixels when it's set as a percentage?

Unfortunately, I cannot make changes to the main CSS file to convert the units from % to px, so that is not an option.

Thank you for your assistance.

htmljquerycss

Answer №1

If you want to calculate the padding of an element based on its percentage value and the width of the window, you can use the formula 

let yourPadding = (document.getElementById("yourDiv").element.style.paddingLeft * window.innerWidth)/100;

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Multiple occurrences of IP addresses in MySQL

Looking for assistance. I have categories and comments stored with IP addresses. I need to validate all categories for repeated IPs. For each user who uses the same IP twice, add a CSS class (red) to their name. If they use it three times, add another CSS ...

phpmysqlcssip

How can I apply a unique CSS class to specific rows within an h:dataTable?

I am looking to apply unique CSS classes to certain rows within my <h:dataTable>. Is it possible to manipulate and style the individual table rows in a customized manner? ...

cssjsfdatatable

AngularJS is not showing the dropdown options as expected

I am facing an issue where the dropdown list options are not displaying, even though I am able to fetch the data in the controller but not in HTML. Here is the code snippet: In HTML <select name="nameSelect" id="nameSelect" ng-model="model.name"> ...

javascriptjqueryangularjs

Discover updates within a JQuery Ajax call

I am sorry if this question sounds simple, but I would like to know how to set up a function that triggers when the Ajax data changes from the previous request. window.setInterval(function(){ $.get("feed", function(data){ if (data.changed ...

javascriptjqueryajax

Arrange JSON data in ascending order based on the dates, starting with the most recent date, by utilizing jquery

I'm in need of assistance on sorting a list of articles from an external json file based on their creation date. Can anyone provide guidance? Currently, I am fetching the data using AJAX and displaying only 6 results, but I'm facing difficulties ...

javascriptjqueryhtmljsonweb-deployment

Guide to dynamically modify the font family value of the entered text

I have a simple question regarding customizing font styles. I have an input text field and a drop-down list with various font family options. My goal is to display the text entered in the input field in the selected font style from the dropdown list. Can ...

phphtmlmysqli

Show the page information directly on the current page instead of redirecting it to a different page

On my website (For example, Link1: http://localhost:8086/MyStrutsApp/login.do), there are multiple links available. Whenever a user clicks on one of these links, they are directed to another page (For instance, link2: http://localhost:8086/MyStrutsApp/AddB ...

javajqueryajaxstruts-1

Execute function upon changing the title of a list item using jQuery

Hey there, I've got a question for you. Is it possible to trigger an event when the title of a list element is changed? For example: <ul> <li id="li_1" title="40">40</li> </ul> So when the title attribute changes (coming ...

htmljquery

Switching over to a stored procedure

I have been using a query string for the jQuery Autocomplete plugin, but I think it would be better to switch to a stored procedure. However, when I tried to do so, it didn't work. Can anyone provide guidance on how to convert my code? Original ASHX ...

htmlsql-server-2005autocomplete

Increase the size of a button using CSS styling

Looking for guidance on extending the length of a button in HTML code? Take a look at this snippet: <span class="xp-b-submit xp-b-submit-btn xp-b-right"> <a href="#" class="xp-t-bold" id="PostSubmitLink">Post Search</a> </span> ...

htmlcssbackground

Revamping JSP Content with DOJO AJAX: A Comprehensive Guide

I am currently utilizing the Dojo library and I need assistance with replacing all the content of my jsp/html file. I am attempting to dynamically reload my page whenever new data is updated. Below is the code snippet from my dojo implementation: functio ...

javahtmlajaxjspdojo

How to center an image within a div without it moving

I have set up a JSFiddle for reference: http://jsfiddle.net/AsHW6/ My task involves centering the down_arrow.png images within their respective div containers. I have successfully centered the up_arrow.png images using auto margins. These images are posit ...

csshtmlcss-positionalignment

Using Beautiful Soup to scrape the web and populate a Python list with the data

I have been working on learning how to web scrape with Python and BeautifulSoup, but I am running into an issue. When I try to add scraped items to a new list, only the final entry in the relevant tags is being displayed when I print the lists. How can I m ...

pythonhtmlwebbeautifulsoupscreen-scraping

Ways to resize column widths in tree views on Odoo version 10?

I have been struggling to adjust the column width of the columns in my tree view. I have attempted a few different solutions: Trying to change the width attribute in the field tag: width="100px" or width="15%%" Using the style att ...

csstreeviewodooodoo-10odoo-view

Troubleshooting Bootstrap 3.0: Issues with nav-tabs not toggling

I have set up my navigation tabs using Bootstrap 3 in the following way: <ul class="nav nav-tabs pull-right projects" role="tablist" style="margin-top:20px;"> <li class="active"><a role="tab" data-toggle="tab" href="#progress">In Pr ...

javascriptjqueryhtmlcsstwitter-bootstrap

What could be causing the malfunction in one of the functions within my JavaScript code?

As a JavaScript beginner, I am currently working on creating a To-do App with JavaScript. Most of the functions are functioning perfectly except for one called doneTask at line 36. Despite numerous attempts to identify the issue, I have been unsuccessful s ...

javascripthtmlcss

Is there a way to exclude the Unicode character from the first menu item while still utilizing it in the other items on my menu?

I have been working on customizing my menu by using the unicode character \25C6 to represent a black solid diamond as a spacer between labels. After searching for solutions on Stack Overflow, I attempted to implement the suggested method using the bef ...

csswordpressmenuicons

`Center Google My Map Location - Embedded in the Middle of the Page`

Recently, I transitioned to using an embedded My Map for a business with 2 locations. However, I encountered some challenges in customizing the map's height, width, and centering on the page. Is there a way to resolve this issue? New HTML code which ...

htmlgoogle-mapsjoomla

Combining iDangerous Swiper with jquery .click() for Ultimate User Interaction

Need some help with this issue: I'm currently utilizing the iDangerous Swiper plugin, which is functioning properly. However, I also want to implement jQuery's click function on that same iDangerous swiper. For instance: <div id="swiper-con ...

jqueryclickswiper.js

Increase the Value of a Model Using the Power of Ajax and Razor

While iterating through a collection in my model using Razor to render it, one scenario could be: @foreach(var item in myCollection) { <span id='<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2b425f4e46066b425f4e46 ...

c#jqueryajaxasp.net-mvcrazor