removing css style for element by ID

Question

how to disable style for element already has styled with css by element name and I can't make the same same style by etering a class name in css just #ElementName which style attribute doesn't shown on html code?

Answer 1

You can't disable styles that are set, but you can override them. The inherit value can be used to restore the behaviour for styles that are inherited by default. Example:

div { color: red; }
div .exception { color: inherit; }

Any div element will get red text, except the ones with class="exception" which will inherit the text color from their parent.

Answer 2

You can't disable a style, you can only override that style with specificity. If you absolutely have to, you can rely on the !important directive:

#el { background:red !important; }

Otherwise for god knows what if you can't/don't have access to CSS then you can do $('#foo').css('background', 'red') or similar.

Answer 3

You can reset the element style depending on the tag's standard via something like this:

$('#ElementName').css({
  'position': 'relative',
  'display': 'box',
  'with': 'auto',
  'height': 'auto',
  'color': '#FFFFFF'
});

You can rename the element id:

$('#ElementName').attr('id', 'ElementName2');

That's my best guesses.

Answer 4

You could try:

$("selector").removeAttr("style");

but my question is: why do you want to remove CSS styles? Usually this is a sign that you're not doing something in a good way. Like some will write code like this:

$("selector").hover(function() {
  $(this).css("background", "red");
}, function() {
  // ???
});

The problem of course is that you don't know what to set the background to in order to reset it to normal. That's why you should use classes:

div.highlight { background: red; }

with:

$("selector").hover(function() {
  $(this).addClass("highlight");
}, function() {
  $(this).removeClass("highlight");
});

Problem solved.

So I can't comment on your approach because you haven't provided enough detail for that but in my experience questions like "how do I remove a style?" are a red flag.

Answer 5

I ran into this issue a couple weeks ago. Every element has a default value. just override it to that default value.

ie. width and height's default value is auto. not all are auto though. overflow's default is visible.