CODEWITHSUNDEEP
jquery
gstackoverflow
gstackoverflow

Reputation: 37078

Why doesn't jQuery.css method change anything?

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?

Upvotes: 1

Views: 82

Answers (2)

Spokey
Spokey

Reputation: 10994

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;");

Upvotes: 4

V31
V31

Reputation: 7666

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

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

Example to change css

Upvotes: 1

Related Questions