我想知道,当使用纯JavaScript而不是jQuery库或任何其他库单击时,如何使HTML元素(如<div><p>标记元素)的大小可以调整.

推荐答案

我真的推荐使用某种图书馆,但你要的是它,你得到的是:

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

请记住,这可能不能在所有浏览器中运行(仅在Firefox中测试,绝对不能在IE<;9中运行).

Html相关问答推荐

如何使用css为动态用户输入矩阵添加背景色?

HTML+CSS+JS动态选中文本高亮 colored颜色 变化

我无法使用背景图像css,因为我在VS代码中将照片放在不同的文件夹中

如何使用html的<;输入>;处理/绑定Angular 信号?

如何在页面太短时使<;img&>缩小而不发生y溢出

有没有什么方法可以很容易地给一个SVG一个插框阴影?

如何在R rmarkdown中创建循环中的分页表?

HTML中的ARIA标签:在元素内部还是外部?(&Q;

为什么当我按第三个按钮时,前两个按钮会跳动?

如何垂直对齐列表中的图像和文本?

如何避免链接在悬停 timeshift 动,同时增加导航栏中的字体大小?

CSS 网格跨度行到所有行

如何制作一个空的网格模板行来填充剩余空间?

th 内的 div 标签没有占据全高

如何为某些行具有 rowspan 的表的每个奇数行着色

如何使用 CSS Flex 设计一个导航栏,其中一组项目左对齐而另一组项目右对齐?

我正在try 向我预先存在的导航栏添加响应式汉堡包导航,但由于某种原因它没有显示

列宽等于最宽列宽度的无界容器

为什么我的动画会向 Moz Firefox 中的微调器添加人工制品?

图像不会在 HTML 中居中