How to override inline style dynamically?

I have the following html code:

<div title="remove css"style="position:relative;">Remove my style</div>

I have to remove the position style attribute completely after page load. I am in a situation where I can't override the CSS. I have to completely remove position style. How is this possible?

You can override css like so:

$('div').css({'position': 'static'});

http://api.jquery.com/css/

do it using jquery to overwrite the original value

$("#ID").css("rule","newvalue");

OR create create a new class with oposite rule the default positioning for all elements is static so like this 

myclass{
position:static!important;   //to overwrite anything else

}

then with jquery 

$("#id").addClass("myclass");

Well, you can remove the position property completely using jquery. The code should be:

$('div').removeAttr("position");

Can't you just set a initial position with CSS, and then on doc ready, removeClass using jQuery?

See Fiddle

Does this seem like what you're after?

You don't need to use jQuery for this simple task, especially if you are not already using it.

Just put an inline style on the divs, this will override the the pre existing CSS.

function overridePosition() {
  var divs = document.getElementsByTagName('div'),
    len = divs.length,
    i = 0;
  for (; i < len; i += 1) {
    // static is the default value of possition
    divs[i].style.position = 'static';
  }
}

window.onload = function() {
  document.querySelector('button').addEventListener('click', overridePosition);
};
div {
  position: relative;
  left: 50px;
}
<button>
  Click Me To override position: relative
</button>
<div>
  <div title="remove css">Remove my style</div>
  <div title="remove css">Remove my style</div>
  <div title="remove css">Remove my style</div>
  <div title="remove css">Remove my style</div>
</div>

There is a way to actually delete the rule, but I highly, highly recommend not doing it this way. It is not a cross browser solution and in the long term it is more hassle then it's worth.

function deletePosition() {
  var cssRules = document.styleSheets[0];

  // the only reason we know what index the rule is at is because it is the only rule.
  var ruleIndex = 0;
  
  if (typeof cssRules.deleteRule == "function") {
    cssRules.deleteRule(ruleIndex);
  } else if (typeof cssRules.removeRule == "function") {
    cssRules.removeRule(ruleIndex);
  } else {
    // don't know how to remove/delete css rule
  }
}


window.onload = function() {
  document.querySelector('button').addEventListener('click', deletePosition);
};
div {
  position: relative;
  left: 50px;
}
<button>
  Click Me To delete css position: relative rule
</button>
<div>
  <div title="remove css">Remove my style</div>
  <div title="remove css">Remove my style</div>
  <div title="remove css">Remove my style</div>
  <div title="remove css">Remove my style</div>
</div>