栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 面试经验 > 面试问答

如何使用纯Javascript调整HTML元素的大小?

面试问答 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

如何使用纯Javascript调整HTML元素的大小?

我真的建议使用某种类型的库,但是您要求它,可以得到:

var p = document.querySelector('p'); // element to make resizablep.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);}

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



转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/407983.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号