Why doesn't jQuery.css method change anything?

Question

In debug I typed the following selector:

$('.jspPane')

Result:

enter image description here

Then I tried to change the div:

$('.jspPane').css({"padding":"1px; top: 1px;"});

Result:

enter image description here

As you can see nothing changed.

What did I do wrong?

Spokey · Accepted Answer · 2014-11-06 12:52:56Z

What you see there is the style attribute that contains "padding: 0px; top: -737px;".

In this case you want to change padding and top.

$('.jspPane').css({ padding: 1, top: 1 }); // or { padding: "1px", top: "1px" }

In the .css() method you need to write the CSS property you want to change, and not the direct string from style.

The method allows more ways to pass the property names.

One of the ways does not accept chaining properties in the same method. Instead you need to chain the methods

$(selector).css('propertyName', 'string or integer to write in property')
           .css('propertyName', 'string or integer to write in property');

On the other hand by passing an object you'll be able to chain properties

$(selector).css({
  propertyName: 'string or integer to write in property',
  propertyName2: 'string or integer to write in property'
});

Alternatively you could just edit the style attribute

$('.jspPane').attr('style', "padding: 1px; top: 1px;");

V31 · Accepted Answer · 2014-11-06 10:13:46Z

1

You are doing this incorrectly.The correct syntax is (to apply padding from the top)

$('.jspPane').css("padding","1px 0 0 0");

answered Nov 6, 2014 at 10:13

V31

7,6643 gold badges28 silver badges44 bronze badges

2 Answers 2