Skip to content

Instantly share code, notes, and snippets.

@daniel08s

daniel08s/customAttr.html

Last active July 31, 2019 20:17
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save daniel08s/5430c462b12fe82e039ddaaacc8f0eda to your computer and use it in GitHub Desktop.
Save daniel08s/5430c462b12fe82e039ddaaacc8f0eda to your computer and use it in GitHub Desktop.
Download ZIP
Dynamically changing content on CSS pseudo elements with custom attributes and attr() // Demo: https://jsbin.com/bezuraz
Raw
customAttr.html
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
<style type="text/css">
article {
display: block;
background: #ccc;
}
article::before {
content: 'parent: ' attr(data-parent) ' | columns: ' attr(data-columns);
}
article[data-columns='3']{
width: 400px;
background-color: red;
}
article[data-columns='4']{
width: 600px;
background-color: blue;
}
</style>
</head>
<body>
<article
id="electriccars"
data-columns="3"
data-indexnumber="12314"
data-parent="cars">
</article>
<script>
function sleep(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
var article = document.querySelector('#electriccars'),
data = article.dataset;
//alert(JSON. stringify(data));
async function sleepz(ms) { await sleep(ms) };
sleepz(2000).then(() => {
alert('finished waiting');
article.dataset.parent = 'vehicles';
article.dataset.columns = '4';
//alert(JSON. stringify(data));
});
// data.columns -> "3"
// data.indexnumber -> "12314"
// data.parent -> "cars"
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment