Remove inline styles from <table><tr><td>

JavaScript
1

hi

i want to remove the inline styles from <table><tr><td> inside the <div id=“tt”>


<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script type="text/javascript">
document.removeAttribute('style');
</script>
</head>
<body>
<div id="tt">
<table>
      <tr style="PADDING-BOTTOM: 0px; BORDER-RIGHT-WIDTH: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; BORDER-TOP-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; FONT-SIZE: 11px; VERTICAL-ALIGN: baseline; BORDER-LEFT-WIDTH: 0px; PADDING-TOP: 0px; border-image: initial">
            <td style="BACKGROUND-IMAGE: none; BORDER-BOTTOM: rgb(240,240,240) 1px solid; PADDING-BOTTOM: 1px; BORDER-RIGHT-WIDTH: 0px; BACKGROUND-COLOR: rgb(250,250,250); MARGIN: 0px; PADDING-LEFT: 6px; WIDTH: 77px; BACKGROUND-ATTACHMENT: scroll; PADDING-RIGHT: 6px; FONT: bold 12px/16px Arial; BACKGROUND-POSITION: 0px 0px; BORDER-TOP-WIDTH: 0px; COLOR: rgb(125,116,100); VERTICAL-ALIGN: top; BORDER-LEFT-WIDTH: 0px; PADDING-TOP: 1px; background-origin: initial; background-clip: initial; border-image: initial" class="ttl"><font color="#7d7464">2G Network</font></td>
        </tr>
</table>
</div>
</body>
</html>

vineet

2

i tried this also


<script language="javascript">
$("body").attr("style", "");
</script>

but doesnt works

vineet

3

this also doesnt works


<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$('#foo').removeAttr('style');
</script>
</head>
<body>
<div id="foo" style="font-family:Arial, Helvetica, sans-serif"></div>
</body>
</html>

vineet

4

The reason why that doesn’t work is that you are attempting to access and remove something that doesn’t even exist yet.
When the script runs, this is what the page looks like:



<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$('#foo').removeAttr('style');
</script>

Notice that nothing below the script exists yet. That part of the DOM (document object model) has not even been loaded yet.

Place the jQuery code within a jQuery callback, and that will delay execution of the script until the DOM has loaded and is ready to be worked with.


$(function () {
    $('#foo').removeAttr('style');
});
5

hi paul

i tried your solution. but that also doesnt works. Am i again missing something ?


<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
    $('#foo').removeAttr('style');
});
</script>
</head>

<body>
<div id="foo" style="font-family:Arial, Helvetica, sans-serif"></div>
</body>
</html>

vineet

6

It works for me. Are you still seeing it for example when you view the source?

7

hi paul

yes when i do the “view source” i can see the style attributes still exists

check this below link
http://wdpixels.com/banners/styl.html

i m checking it in IE7 and firefox 10

vineet

8

Thank you for clarifying that, that is normal. What you see when you view the source is the code from the web server It is not possible for JavaScript to edit the contents of the HTML file.

With Internet Explorer if you press F12 though, you can see the end result of what is rendered to the screen after the script has run, which you will find confirms that the script does remove those styles.

9

hi paul

thanks for clarification.

One more question i would like to ask,
What shoudl i do to remove all the styles those are present or applied to any <tag> like <table><tr><td> that are inside the div#f00

http://wdpixels.com/banners/styl.html

at present only the styles that are applied to div#foo are removed but not the styles of <table><tr><td>

vineet

10

One way would be to search for all elements that have a style attribute, so that you can then remove that attribute.


$('[style]', '#foo').removeAttr('style');

or


$('#foo [style]').removeAttr('style');

The first example is the preferred syntax, as using a context selector provides slightly improved performance.

11

i applied it but its not working for me

http://wdpixels.com/banners/styl2.html

do i need to change something in that code

or i have to replace [style] with [td]

vineet

12

You have removed the jQuery wrapper, which delays execution of the code until after the DOM has been loaded and is ready to be worked with.

13

sorry my mistake

thanks a lot for your help

everything is working fine now.

vineet

14

one more question i have.

In my php cms, If i want to remove all the “styles” from the content which gets added automatically while pasting content in the form.

then what is the solution.

vineet

15

Our PHP forum might have a solution for you with that.

16

hi paul

yes i forgot you already said that


It is not possible for JavaScript to edit the contents of the HTML file.

vineet