ClearType breaks with CSS filter - How to remove attribute with JavaScript?_问答_开发者

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

开发者 https://www.devze.com 2023-01-15 23:49 出处：网络

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'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>

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).

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