1

The title says it all.

In any other browsers (opera, vivaldi, chrome, firefox) i was testing so far I got a string with the actual padding like "4px"

Here's a sample.

$(document).ready(updatePadding);

function updatePadding(event){
 const padding = 10;
  
  let elem = $("#b1");
  
  elem.css("padding", padding * 2);
  elem.css("padding-top", 5);
  elem.html("padding: " + elem.css("padding"));
  
  elem = $("#b2");
  elem.css("padding", padding * 3);
  elem.css("padding-top", 5);
  elem.css("padding-bottom", 5);
  elem.html("padding: " + elem.css("padding"));
  
  elem = $("#b3");
  elem.css("padding", padding * 4);
  elem.html("padding: " + elem.css("padding"));  
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="b1"></button>
<button id="b2"></button>
<button id="b3"></button>

You should see the padding of the buttons as their content - If not you are most probably using edge.

This seems like a bug to me but maybe it is per design. I tested different parameters for the JQuery .css function and found out that some work and others don't. E.g.: width, height, color: OK, padding, margin: fail. First it seemed that only one dimensional css properties are returned correctly but then I saw the correct result for color "rgb(33,33,33)" so I am not sure anymore.

How would be a correct and efficient solution either with or without JQuery?

markus s
  • 1,024
  • 1
  • 11
  • 20
  • How about `elem[0].styles.padding`? – Martijn Sep 22 '17 at 09:12
  • https://stackoverflow.com/questions/5227909/how-to-get-an-elements-padding-value-using-javascript – mplungjan Sep 22 '17 at 09:18
  • I think the best would be to use [computed styles](https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle) – lumio Sep 22 '17 at 09:18
  • My appologies for this duplicate question. I was not aware that `padding` is just a shorthand css property and didn't figure out the right web-/stackoverflow search. – markus s Sep 22 '17 at 10:26

0 Answers0