get class in HTML5 which contains SVG

get class in HTML5 which contains SVG to demonstrate potential logic for jQuery

by mpedrotti

HTML

<h4>Test of expression to get class attribute value in HTML5 which contains SVG</h4>
<p>For <strong>span</strong> or <strong>text</strong> elements which have the following class attributes, the values could be computed by either of the following expressions:
<br />1) typeof elem.className === &quot;string&quot; ? elem.className : elem.getAttribute(&quot;class&quot;) ? elem.getAttribute(&quot;class&quot;) : &quot;&quot;
<br />2) typeof elem.className === &quot;string&quot; ? elem.className : typeof elem.getAttribute(&quot;class&quot;) === &quot;string&quot; ? elem.getAttribute(&quot;class&quot;) : &quot;&quot;</p>
<p><strong>Important:</strong> If this was XHTML5 (that is, served as XML in addition to having the HTML5 DOCTYPE), the .className columns for SVG <strong>text</strong> in the second table would be <strong>object</strong> and <strong>[object SVGAnimatedString]</strong> instead of <strong>string</strong> and string values.</p>
<table id="resultsHTML">
<thead>
<tr><th>span</th><th colspan="2">computed</th><th colspan="2">.className</th><th colspan="2">getAttribute(&quot;class&quot;)</th></tr>
<tr><th>class=&quot;&#x2026;&quot;</th><th>1) value</th><th>2) value</th><th>typeof</th><th>value</th><th>typeof</th><th>value</th></tr>
</thead>
<tbody>
<tr>
<th><span>no class attribute</span></th>
</tr>
<tr>
<th><span class="">empty class attribute</span></th>
</tr>
<tr>
<th><span class="strong">strong</span></th>
</tr>
<tr>
<th><span class="emphasis">emphasis</span></th>
</tr>
<tr>
<th><span class="strong emphasis">strong emphasis</span></th>
</tr>
</tbody>
</table>
<table id="resultsSVG">
<thead>
<tr><th>text</th><th colspan="2">computed</th><th colspan="2">.className</th><th colspan="2">getAttribute(&quot;class&quot;)</th></tr>
<tr><th>class=&quot;&#x2026;&quot;</th><th>1) value</th><th>2) value</th><th>typeof</th><th>value</th><th>typeof</th><th>value</th></tr>
</thead>
<tbody>
<tr>
<th>
<svg version="1.1" viewBox="0 0 150 10" preserveAspectRatio="xMinYMin...

CSS

* { margin-top: 0; margin-bottom: 0; }
body { line-height: 1; font-family: Helvetica, Verdana, sans-serif; }
h4 { margin-top: 1em; margin-bottom: 1em; }
.strong { font-weight: bold; }
.emphasis { font-style: italic; }
table { margin-top: 1em; }
th { text-align: left; }
table tbody th { width: 15em; font-weight: normal; }

JavaScript

(function ($) {
function td(text, expected) {
return '<td>' + text + '</td>';
}
function table($table, selector) {
$table.find('tbody tr').each(function () {
var $tr = $(this), elem = $tr.find(selector).get(0);
$tr
.append(td(typeof elem.className === "string" ? elem.className : elem.getAttribute("class") ? elem.getAttribute("class") : ""))
.append(td(typeof elem.className === "string" ? elem.className : typeof elem.getAttribute("class") === "string" ? elem.getAttribute("class") : ""))
.append(td(typeof elem.className))
.append(td(elem.className))
.append(td(typeof elem.getAttribute("class")))
.append(td(elem.getAttribute("class")));
});
}
table($('#resultsHTML'), 'span');
table($('#resultsSVG'), 'text');
}(jQuery));