Question

I can’t read the values set by external css sheaths when using webkit.

$(document).ready(function() {
    var plate = $(document.createElement('div'))
            .css({'overflow': 'hidden',
                  'display': 'inline-block'})
            .attr('class', $(this).attr('class'))
            .addClass('bbFormerPlate');
    console.log(plate.css('paddingRight'));
    console.log(plate.css('paddingBottom'));
});

The console in Chrome shows nothing. Just an empty line. Firefox have no problem. Tested Safari (Windows) which doesn’t work either with lead me to believe that it’s webkit that’s the problem.

I tried to add it to another element that was already positioned on the page to see if that made any difference.

 $(positionedElement).wrap(plate);

No change. Still doesn’t work on Webkit, but does work on FF.

The style declaration:

.bbFormerPlate {
    padding: 2px 15px 2px 5px;
    font-size: 10px;
}

The style is actually applied to the element as it appears on the page, but the value can not be read by the script. I can’t remember I’ve had this problem before.

Any help would be appreciated.

Answer 1

In your example you didn’t inserted the element inside the dom, check this (working)

$(document).ready(function() {
    var plate = $('<div></div>')
        .css({'overflow': 'hidden',
              'display': 'inline-block'})
        .attr('class', $(this).attr('class'))
        .addClass('bbFormerPlate');
        $('body').append(plate); // added this line

    console.log(plate.css('paddingRight'));
    console.log(plate.css('fontSize'));
});​

DEMO.