element/attr-by-name/class-4.html

<!DOCTYPE html>
<html lang="en">
<head>
<title>Element['class']</title>
<script src="../../../support/result0.js"></script>
<style type="text/css">
  p {
    color: orange;
  }
  p.value-of-the-class-attribute {
    color: green;
  }
  p.new-value-of-the-class-attribute {
    color: blue;
  }
</style>
</head>
<body>

<div><p id="a" class="value-of-the-class-attribute">XXXXXX</p></div>

<script type="text/javascript">
  var a = document.getElementById ('a');
  a['class'] = 'new-value-of-the-class-attribute';

  document.write ('<dl><dt><code><var>Element</var>["class"]</code></dt><dd>');
  writeResult (a['class']);
  document.write ('</dd><dt><code><var>Element</var>.getAttribute ("class")</code><dd>');
  writeResult (a.getAttribute ('class'));
  document.write ('</dd><dt><code><var>Element</var>.parentNode.innerHTML</code></dt><dd>');
  document.write (htescape (a.parentNode.innerHTML));
  document.write ('</dd></dl>');
</script>

</body>
</html>
1	<!DOCTYPE html>
2	<html lang="en">
3	<head>
4	<title>Element['class']</title>
5	<script src="../../../support/result0.js"></script>
6	<style type="text/css">
7	p {
8	color: orange;
9	}
10	p.value-of-the-class-attribute {
11	color: green;
12	}
13	p.new-value-of-the-class-attribute {
14	color: blue;
15	}
16	</style>
17	</head>
18	<body>
19
20	<div><p id="a" class="value-of-the-class-attribute">XXXXXX</p></div>
21
22	<script type="text/javascript">
23	var a = document.getElementById ('a');
24	a['class'] = 'new-value-of-the-class-attribute';
25
26	document.write ('<dl><dt><code><var>Element</var>["class"]</code></dt><dd>');
27	writeResult (a['class']);
28	document.write ('</dd><dt><code><var>Element</var>.getAttribute ("class")</code><dd>');
29	writeResult (a.getAttribute ('class'));
30	document.write ('</dd><dt><code><var>Element</var>.parentNode.innerHTML</code></dt><dd>');
31	document.write (htescape (a.parentNode.innerHTML));
32	document.write ('</dd></dl>');
33	</script>
34
35	</body>
36	</html>