demo: style element(s) via data attribute(s)

demo-style-element-s-via-data-attribute-s.markdown

demo: style element(s) via data attribute(s)

A Pen by soren on CodePen.

License.

index.html

<!--
The plan: click link to show an overlay (super basic version). Overlay grows from center of parent to be full width and height of parent. We'll change parent data attribute value with JavaScript to control overlay behaviour
-->

<!-- parent element with data attribute attached -->
<div class="overlayParent" data-overlay-visibility="hidden">
	<!-- overlay trigger link -->
	<a href="#" class="overlayLink">Show overlay</a>
	<!-- overlay -->
	<div class="overlay"></div>
</div>

script.js

/**
 * let's update data attribute value on click event
 */


// 1a. variable: get element with data attribute so we can update its value
var dataEl = document.body.querySelector(".overlayParent");

// 1b. variable: get element that triggers overlay link event function
var overlayLink = dataEl.querySelector(".overlayLink");




// 2a. function. get and set data value (by condition)
function getAndSetDataValue() {
	// variable: get element data attribute value
	var parentDivDataAttribute = dataEl.getAttribute("data-overlay-visibility");

	// condition: does value = A ? [true] set to B : [false] set to A
	dataEl.setAttribute(
		"data-overlay-visibility",
		parentDivDataAttribute === "hidden" ? "visible" : "hidden"
	);
}




// 2b. function. update overlay link text
function updateOverlayLinkText() {
	// variable: get overlay link text
	var preEventOverlayLinkText = overlayLink.innerText;
	
	// variable: get post-click overlay link text
	// does value = A ? [true] set to B : [false] set to A
	var postEventOverlayLinkText =
		preEventOverlayLinkText === "Show overlay" ? "Hide overlay" : "Show overlay";

	// update overlay link text
	overlayLink.innerText = postEventOverlayLinkText;
}




// 3. function: overlay link event
function overlayLinkEvent(event) {
	// stop event target default behaviour
	event.preventDefault();
	
	// run 2a function.  
	// update data attribute value
	getAndSetDataValue();
	
	// run 2b function
	// update link text
	updateOverlayLinkText();
}




// 4. event: run overlay link event function
overlayLink.addEventListener("click", overlayLinkEvent, false);

style.postcss

/**
* <div class="overlayParent" data-overlay-visibility="hidden">
* 	  <a href="#" class="overlayLink">Show overlay</a>
* 	  <div class="overlay"></div>
* </div>
*/

/* overlay parent element */
.overlayParent {
	/* overlay link positioned "absolute" inside parent, so parent needs position, too. */
	position: relative;
	width: 300px;
	height: 300px;
	/* center overlay inside parent. overlay will grow from parent center */
	display: flex;
	justify-content: center;
	align-items: center;
}

/* overlay element [data-overlay-visibility="hidden"] */
.overlay {
	/* position overlay inside parent but on a new layer */
	position: absolute;
	/* center overlay inside parent */
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	/* hide overlay */
	width: 0;
	height: 0;
	opacity: 0;
	/* transition properties for nice smooth effect */
	transition: all .2s;
	background-color: indianred;
	/* place overlay layer behind parent layer */
	z-index: -1;
}

/* overlay element [data-overlay-visibility="visible"] */
[data-overlay-visibility="visible"] .overlay {
	/* show overlay */
	width: 100%;
	height: 100%;
	opacity: .8;
	/* place overlay layer in front of parent layer */
	z-index: 5;
}

/* overlay link element */
.overlayLink {
	color: black;
	/* remove default link underline */
	text-decoration: none;
	/* place link layer in front of parent and overlay layers */
	z-index: 10;
}

/* link element: on hover */
.overlayLink:hover {
	/* give link an underline */
	text-decoration: underline;
	cursor: pointer;
}

/* THE END 
*
*
*
* 
* now let's prettify shit for the fun of it
*/

body {
	-webkit-font-smoothing: antialiased;
	background-color: #111;
	/* center parent div inside viewport */
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
	/* hide x and y axis overflow */
	overflow: hidden;
}

.overlayParent {
	/* fallback color in case background image doesn't show */
	background-color: cornflowerblue;
	background-image: url('http://images.45worlds.com/f/cd/elliott-smith-from-a-basement-on-the-hill-2-cd.jpg');
	/* just the one image is needed. no repeats. */
	background-repeat: none;
	/* make image fill parent  */
	background-size: cover;
}

.overlayLink {
	color: #000;
	/* move link down off-center by 20px */
	transform: translateY(20px);
}