74 lines
2.0 KiB
HTML
74 lines
2.0 KiB
HTML
<style>
|
|
#test {
|
|
padding: 10px;
|
|
border: 1px solid #ccc;
|
|
margin: 20px 0;
|
|
}
|
|
pre {
|
|
overflow-x: auto;
|
|
padding: 10px;
|
|
border: 1px dashed #ccc;
|
|
background: #fff;
|
|
font-size: 12px;
|
|
}
|
|
</style>
|
|
<title>data-*</title>
|
|
<article>
|
|
<section>
|
|
<p>The <code>data-[name]</code> attribute on elements can now be accessed directly via the DOM using <code>element.dataset.[attr]</code>.</p>
|
|
<p>Try openning the Web Console and editing <code>element.dataset</code> directly: <br /><code>element.dataset.foo = 'bar';</code></p>
|
|
</section>
|
|
<p id="status">Not connected</p>
|
|
<section>
|
|
<div id="testWrapper"><div id="test" data-name="rem" data-height="short">This element has data</div></div>
|
|
<input type="button" value="Show data" id="show" />
|
|
<input type="button" value="Change data via dataset" id="change1" />
|
|
<input type="button" value="change data via setAttribute" id="change2" />
|
|
</section>
|
|
<pre><code id="element">[click buttons above to show element html]</code></pre>
|
|
</article>
|
|
<script>
|
|
(function () {
|
|
|
|
function show() {
|
|
code.innerHTML = testWrapper.innerHTML.replace(/[<>]/g, function (m) {
|
|
return { '<': '<', '>': '>' }[m];
|
|
});
|
|
|
|
for (var prop in test.dataset) {
|
|
code.innerHTML += '\nel.dataset.' + prop + ' = "' + test.dataset[prop] + '"';
|
|
}
|
|
}
|
|
|
|
var state = document.getElementById('status'),
|
|
code = document.getElementById('element');
|
|
|
|
var test = document.getElementById('test'),
|
|
testWrapper = document.getElementById('testWrapper');
|
|
|
|
if (test.dataset === undefined) {
|
|
state.innerHTML = 'dataset not supported';
|
|
state.className = 'fail';
|
|
} else {
|
|
state.className = 'success';
|
|
state.innerHTML = 'element.dataset supported';
|
|
}
|
|
|
|
addEvent(document.getElementById('show'), 'click', function () {
|
|
show();
|
|
});
|
|
|
|
addEvent(document.getElementById('change1'), 'click', function () {
|
|
test.dataset.name = 'via el.dataset';
|
|
show();
|
|
});
|
|
|
|
addEvent(document.getElementById('change2'), 'click', function () {
|
|
test.setAttribute('data-name', 'via setAttribute');
|
|
show();
|
|
});
|
|
|
|
|
|
})();
|
|
</script>
|