Jquery css values in webkit

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.

You're putting your console.logs outside the dom ready declaration, so you have a scope issue. The plate variable only exists inside that function. — Mike Robinson
– Mike Robinson, Commented Jul 26, 2012 at 16:32
Ah... My bad. They are actually inside the ready declaration. I accidently put it outside when I wrote the above example — Anders
– Anders, Commented Jul 26, 2012 at 16:42

The Alpha · Accepted Answer · 2012-07-26 17:08:47Z

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.

edited Jul 26, 2012 at 17:08

answered Jul 26, 2012 at 16:56

The Alpha

147k30 gold badges294 silver badges313 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Anders Over a year ago

I thought .wrap would do that. I'll so some more testing and get back to you

Anders Over a year ago

Working with .append() and .appendTo() works fine. I'll stick with that instead of banging my head with .wrap(). Thank you

Collectives™ on Stack Overflow

Jquery css values in webkit

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related