ClearType breaks with CSS filter - How to remove attribute with JavaScript?

2k Views Asked by Louis Waweru At 11 April 2025 at 04:05

I'm trying to use JavaScript to remove the CSS attribute "filter" from a block of text on a page.

The reason is that using filter disables ClearType in IE8.

I've tried using document.getElementById("someDiv").style.removeAttribute('filter'); and someDiv.style.removeAttribute('filter'); which don't throw errors, but have no effect.

Any suggestions would be appreciated.

Thanks for reading,
Louis

Here's an example page:

http://img37.imageshack.us/img37/9057/filteroff.png
Filter off.

http://img203.imageshack.us/img203/3821/filteron.png
Filter on.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Example</title>
</head>
<body style="filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#ffffff', startColorstr='#eeeeee', gradientType='0');">
<div id="SomeText">
Hi, I'm some text.<br />
How's ClearType handling me?
</div>
<script type="text/javascript">
    document.getElementById("SomeText").style.removeAttribute('filter');
    SomeText.style.removeAttribute('filter');
</script>
</body>
</html>

Original Q&A

There are 2 best solutions below

Andrew67 On 09 September 2010 at 05:13

Probably can't remove filter from the <div> because it has no filter property.

<body> is the tag with the property; after some messing around

document.body.style.filter = '';

Removes the filter (but obviously, from the whole body).

Clarence Liu On 19 December 2011 at 18:10

You shouldn't be using filter to achieve your desired effect - it's old IE code and doesn't work in other browsers, and yes the filter is only on the body so there's nothing you can do to keep ClearType on your text.

If you can use an HTML5 doctype then try these CSS3 tricks http://css-tricks.com/examples/CSS3Gradient/ - testing this on IE8 with an HTML doctype the vertical gradient works.

Or as a last resort you can create a background image that's the gradient (any width), then use repeat-x and no repeat-y - but that'd have a fixed height as a limitation

ClearType breaks with CSS filter - How to remove attribute with JavaScript?

There are 2 best solutions below

Related Questions in JAVASCRIPT

Related Questions in INTERNET-EXPLORER-8

Related Questions in FILTER

Related Questions in CLEARTYPE

Trending Questions

Popular # Hahtags

Popular Questions