ClearType breaks with CSS filter - How to remove attribute with JavaScript?
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,
LouisHere's an example page:
http://img37.imageshack.us/img37/9057开发者_如何学编程/filteroff.png
Filter off. http://img203.imageshack.us/img203/3821/filteron.pngFilter 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
加载中,请稍侯......
精彩评论