How to make HTML element resizable using pure Javascript?

Question

I was wondering how we can make a HTML element like <div> or <p> tag element resizable when clicked using pure JavaScript, not the jQuery library or any other library.

Answer 1

I really recommend using some sort of library, but you asked for it, you get it:

var p = document.querySelector('p'); // element to make resizable  p.addEventListener('click', function init() {     p.removeEventListener('click', init, false);     p.className = p.className + ' resizable';     var resizer = document.createElement('div');     resizer.className = 'resizer';     p.appendChild(resizer);     resizer.addEventListener('mousedown', initDrag, false); }, false);  var startX, startY, startWidth, startHeight;  function initDrag(e) {    startX = e.clientX;    startY = e.clientY;    startWidth = parseInt(document.defaultView.getComputedStyle(p).width, 10);    startHeight = parseInt(document.defaultView.getComputedStyle(p).height, 10);    document.documentElement.addEventListener('mousemove', doDrag, false);    document.documentElement.addEventListener('mouseup', stopDrag, false); }  function doDrag(e) {    p.style.width = (startWidth + e.clientX - startX) + 'px';    p.style.height = (startHeight + e.clientY - startY) + 'px'; }  function stopDrag(e) {     document.documentElement.removeEventListener('mousemove', doDrag, false);     document.documentElement.removeEventListener('mouseup', stopDrag, false); } 

Demo

Remember that this may not run in all browsers (tested only in Firefox, definitely not working in IE <9).