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	wakaba	1.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>