Getting margin value from chrome

JavaScript
1

I’ve set my margin as a % and am trying to get the value via jquery. It’s being returned as a pixel value from safari and firefox, chrome is returning the percentage.

outerWidth returns an incorrect value (reporting as 1px more than innerWidth and I know it’s 4px). Anyone else run into this problem?

2

There are many ways to get the value via jQuery.
Which way are you using in particular?

3

script is a little more involved, but here’s where the margin part comes in.


var donor_box = $(this).parent('dt');
var margin = parseInt(donor_box.css("margin-right"));

So…*if I dump the margin variable to the console, firefox and safari report back a pixel value, chrome is reporting the percentage set in my css file.

4

Apparently there’s no automatic way that’s available.
This post though provides a way to calculate the percentage:
get CSS rule’s percentage value in jQuery

5

so… is there no way to do this in chrome then?


console.log('width: ' + donor_box.width());
console.log('innerWidth: ' + donor_box.innerWidth());
console.log('outerWidth: ' + donor_box.outerWidth());

are all reporting the same value. Kind of blows my mind how google has this set up.

I appreciate the stackoverflow link, but unfortunately doesn’t apply to my case.

6

As in, you set a percentage and Chrome reports back to you the correct percentage value that you set, whereas other browsers force it to pixels instead? Yeah, that’'s a problem.

Using the javascript style property to set and retrieve the value works in all browsers that I’ve tested (chrome, firefox, internet explorer, opera, safari).


<html>
<head>
<style type="text/css">
#container {
    border: 1px solid black;
}
#mysection {
    border: 1px solid blue;
    height: 500px;
}
</style>
</head>
<body>
<div id="container">
    <div id="section">
    </div>
</div>
<script>
window.onload = function () {
    var container = document.getElementById('container');
    var section = document.getElementById('section');
    section.style.marginRight = '50%';

    var marginRight = section.style.marginRight;
    container.appendChild(document.createTextNode('Right margin: ' + marginRight));
};
</script>
</body>
<html>

so the problem seems to be specific to jQuery itself.

Can the forum specifically for jQuery issues be of any help?
jQuery forum