CODEWITHSUNDEEP
jqueryinternet-explorer
Crayl
Crayl

Reputation: 1911

JQuery - How to delete CSS attributes in Internet Explorer correctly?

I'am doing some form validation and noticed that Internet Explorer don't works correctly (as always). If I attach some text and CSS into a div-element and delete it again (when the input is ok) the Explorer doesn't correct the display again. I mean the text gets deleted, but there still remains a blank row (as if there is br-element). I've checked the source-code and the CSS was deleted correctly, but the display isn't correct. Why?

Other browsers have no problems.

    if(bla)
    { 
      $("div[bez='avz_kw_err']").eq(index).html("Mindestens 3 Zeichen"); 
      $("div[bez='avz_kw_err']").eq(index).attr("style","color:red; font-size:12px; line-height:12px; position:relative; top:5px; left:25px;");
    }
    else
    { 
      $("div[bez='avz_kw_err']").eq(index).html(""); 
      $("div[bez='avz_kw_err']").eq(index).attr("")
    }

Upvotes: 3

Views: 302

Answers (2)

Guffa
Guffa

Reputation: 700412

Using .attr("") won't delete the style, as you haven't specified what attribute to change. Use .attr("style", "") to clear the style attribute.

Demo: http://jsfiddle.net/Guffa/tvL42/2/

Side note: You don't need to create a new jQuery object to set the HTML and the style, just chain the calls:

if(bla) { 
  $("div[bez='avz_kw_err']").eq(index)
    .html("Mindestens 3 Zeichen") 
    .attr("style","color:red; font-size:12px; line-height:12px; position:relative; top:5px; left:25px;");
} else { 
  $("div[bez='avz_kw_err']").eq(index)
    .html("") 
    .attr("style", "");
}

Upvotes: 1

Pointy
Pointy

Reputation: 413757

Don't use ".attr()" to set the style property with jQuery 1.6 or newer. Use ".prop()" instead:

$("div[bez='avz_kw_err']").eq(index).prop("")

The "style" property is a property. IE is very picky about the difference. Use ".prop()" for anything that, when dealing directly with the DOM element un-wrapped by jQuery, you'd treat as an ordinary property of the object: "name", "id", "className", "tagName", etc.

edit because I'm slow this evening — that said - and it's all true - the "style" property in particular is not a string-valued property. It's an object in its own right, and setting it to "" doesn't really make sense (to Firefox or IE). But you can zap all the CSS properties:

$("div[bez='avz_kw_err']").eq(index).each(function() {
  for (var cssp in this.style) {
    this.style[cssp] = '';
  }
});

edit again — hey gang stop upvoting me until I figure out the right answer - this may not work in IE ...

edit boy is IE weird ... OK in IE8 this works:

$("div[bez='avz_kw_err']").eq(index).each(function() {
  for (var cssp in this.style) {
    try { this.style[cssp] = null; } catch (who_cares) {}
  }
});

It's apparently important to use null instead of the empty string; at some point setting something to the empty string caused IE to seize up and spin the CPU for a few seconds.

Upvotes: 4

Related Questions