I have an inline style added to the HTML, like style="left: 10px;". Can I add/subtract to that number?

I would like to create a rule where I can remove 8px from that number no matter what that number is.

I tried using the ugly !important hack to override it, but that doesn't help when the initial value is changed.

I have an inline style added to the HTML, like style="left: 10px;". Can I add/subtract to that number?

I would like to create a rule where I can remove 8px from that number no matter what that number is.

I tried using the ugly !important hack to override it, but that doesn't help when the initial value is changed.

• javascript
• jquery
• html

5 Answers 5

From 1.6 onwards, you can use the convenient:

$('#myelem').css('left','-=8px')

If for some strange reason you are stuck in the past, use:

$('#myelem').css('left', function(i,v) {
    return v - 8;
});

for jQuery 1.4 up.

Maybe you can use margin-left -8px instead. I don't know what you are looking for, but it might do the trick without JavaScript.

There is no CSS rule for such. However, you can do the same using JavaScript.

Assume you have,

.my_left {
   left: 10px;
}

And HTML elements like below,

<div class="my_left">My Div</div>
<div class="my_left">My Div</div>

Then using the below script, you can remove 8px from its current left value:

$(function () {
   $('.my_left').css('left', function (i, ov) {
       return ov - 8;
   });
});

You can use a variable for it, in order to be able to add or subtract:

var x=10;

x=x-parseInt(5);

x=x+parseInt(5);

<div id='something' style="left: "+x+"px"></div>

I've recently found on css-tricks that you can override inline css with

.myClassName[style] {
   left:5px!important;
}

http://css-tricks.com/override-inline-styles-with-css/