Skip to content

Instantly share code, notes, and snippets.

@awestbro

awestbro/index.html

Created April 19, 2020 14:54
Show Gist options
  • Save awestbro/e668c12662ad354f02a413205b65fce7 to your computer and use it in GitHub Desktop.
Save awestbro/e668c12662ad354f02a413205b65fce7 to your computer and use it in GitHub Desktop.
Download ZIP
Highlighting margin, border, and padding with Javascript
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Highlighting elements example</title>
</head>
<body>
<h1>Element Highlighting Example</h1>
<div style=" height: 2rem "></div>
<div class="higlightmeplease" style="margin: 2rem; padding: 2rem; border: 10px solid #0000004a">
I'm a row!
</div>
<div style=" height: 2rem "></div>
<div class="higlightmeplease" style="margin: 2rem; padding: 3rem; border-top: 10px solid #0000004a; border-bottom: 20px solid #0000004a; border-left: 6px solid #0000004a; border-right: 30px solid #0000004a">
I'm a row with different sized borders!
</div>
<script>
function getDocumentHeightAndWidth() {
const body = document.body;
const html = document.documentElement;
const height = Math.max(body.scrollHeight, body.offsetHeight,
html.clientHeight, html.scrollHeight, html.offsetHeight);
const width = document.body.offsetWidth;
return { height, width };
}
function createCanvas() {
var canvas = document.createElement('canvas'); //Create a canvas element
//Set canvas width/height
setCanvasWidthAndHeight(canvas);
//Position canvas
canvas.style.position = 'absolute';
canvas.style.left = '0';
canvas.style.top = '0';
canvas.style.zIndex = '100000';
canvas.style.pointerEvents = 'none'; //Make sure you can click 'through' the canvas
document.body.appendChild(canvas); //Append canvas to body element
const context = canvas.getContext('2d');
context.globalAlpha = 0.5;
return { canvas, context: context };
}
function setCanvasWidthAndHeight(canvas) {
const { height, width } = getDocumentHeightAndWidth();
canvas.style.width = `${width}`;
canvas.style.height = `${height}`;
canvas.width = width;
canvas.height = height;
}
function pxToNumber(px) {
return parseInt(px.replace('px', ''));
}
function drawMarginBorderPadding(ctx, element) {
const style = getComputedStyle(element);
let { top, left, right, bottom, width, height } = element.getBoundingClientRect();
const { marginTop, marginBottom, marginLeft, marginRight, paddingTop, paddingBottom, paddingLeft, paddingRight, borderBottomWidth, borderTopWidth, borderLeftWidth, borderRightWidth, display } = style;
top = top + window.scrollY;
left = left + window.scrollX;
bottom = bottom + window.scrollY;
right = right + window.scrollX;
const numMarginTop = pxToNumber(marginTop);
const numMarginBottom = pxToNumber(marginBottom);
const numMarginLeft = pxToNumber(marginLeft);
const numMarginRight = pxToNumber(marginRight);
const numPaddingTop = pxToNumber(paddingTop);
const numPaddingBottom = pxToNumber(paddingBottom);
const numPaddingLeft = pxToNumber(paddingLeft);
const numPaddingRight = pxToNumber(paddingRight);
const numBorderTop = pxToNumber(borderTopWidth);
const numBorderBottom = pxToNumber(borderBottomWidth);
const numBorderLeft = pxToNumber(borderLeftWidth);
const numBorderRight = pxToNumber(borderRightWidth);
const marginHeight = height + numMarginBottom + numMarginTop;
// DRAW MARGIN
ctx.fillStyle = '#ffa50094';
// Top margin rect
ctx.fillRect(left, top - numMarginTop, width, numMarginTop);
// Bottom margin rect
ctx.fillRect(left, bottom, width, numMarginBottom);
// Left margin rect
ctx.fillRect(left - numMarginLeft, top - numMarginTop, numMarginLeft, marginHeight);
// Right margin rect
ctx.fillRect(right, top - numMarginTop, numMarginRight, marginHeight);
const paddingWidth = width - numBorderLeft - numBorderRight;
const paddingHeight = height - numPaddingBottom - numPaddingBottom - numBorderTop - numBorderBottom;
// DRAW PADDING
ctx.fillStyle = '#00800040';
// Top padding rect
ctx.fillRect(left + numBorderLeft, top + numBorderTop, paddingWidth, numPaddingTop);
// Bottom padding rect
ctx.fillRect(left + numBorderLeft, bottom - numPaddingBottom - numBorderBottom, paddingWidth, numPaddingBottom);
// Left padding rect
ctx.fillRect(left + numBorderLeft, top + numPaddingTop + numBorderTop, numPaddingLeft, paddingHeight);
// Right padding rect
ctx.fillRect(right - numPaddingRight - numBorderRight, top + numPaddingTop + numBorderTop, numPaddingRight, paddingHeight);
const borderHeight = height - numBorderTop - numBorderBottom;
// DRAW BORDER
ctx.fillStyle = '#0000ff1a';
// Top border rect
ctx.fillRect(left, top, width, numBorderTop);
// Bottom border rect
ctx.fillRect(left, bottom - numBorderBottom, width, numBorderBottom);
// Left border rect
ctx.fillRect(left, top + numBorderTop, numBorderLeft, borderHeight);
// Right border rect
ctx.fillRect(right - numBorderRight, top + numBorderTop, numBorderRight, borderHeight);
}
const rowComponentSelector = ".higlightmeplease";
function findComponentsByDefinition(querySelector) {
return document.querySelectorAll(querySelector);
}
const { canvas, context: ctx } = createCanvas();
const rows = findComponentsByDefinition(rowComponentSelector);
function drawSelectedElements(elements) {
const { height, width } = getDocumentHeightAndWidth();
ctx.clearRect(0, 0, width, height);
setCanvasWidthAndHeight(canvas);
elements.forEach((e) => {
drawMarginBorderPadding(ctx, e);
});
}
drawSelectedElements(rows);
window.addEventListener('resize', () => {
drawSelectedElements(rows);
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment