HTML5 常用属性和方法

原创已于 2022-09-12 21:06:38 修改 · 置顶 · 165 阅读

·

0

·

CC 4.0 BY-SA版权

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

文章标签：

于 2022-05-31 21:31:12 首次发布

前端专栏收录该内容

56 篇文章

订阅专栏

本文介绍了HTML的contenteditable属性，用于使元素变得可编辑。同时，详细解析了DOM方法getBoundingClientRect()，它返回元素在浏览器视口的位置及尺寸信息。此外，讨论了window.requestAnimationFrame()函数，它是实现流畅动画的关键，能够在浏览器下次重绘时执行回调函数。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

属性

1、contenteditable
使元素变成可编辑状态

<div contenteditable>点击编辑</div>

方法

1、getBoundingClientRect()

document.getElementById("myDiv").getBoundingClientRect();

返回当前盒子在浏览器中的位置以及自身占据的空间的大小
除了 width 和 height 之外，其他的属性是相对于视图窗口的左上角来计算的
在这里插入图片描述
2、window.requestAnimationFrame()
推迟到浏览器下一次重绘时执行回调

(function animloop() {
     render();
     window.requestAnimationFrame(animloop);
})();

参考：window.requestAnimationFrame讲解

博客等级

码龄8年

87
原创

181
点赞

653
收藏

71
粉丝

关注

私信

热门文章

分类专栏

前端 56篇
转载 19篇

展开全部收起

上一篇：: vue使用国际化插件i18n，如果找不到对应的语言，默认显示指定的语言

下一篇：: js 实现复制可点击的超链接到剪切板

最新评论

git Bash 命令行大全
CSDN-Ada助手: 软件工程问题：如何避免在产品开发后期不断有重大修改，导致其它模块的连锁反应?
滚动翻页效果
z4253467: 大佬有问题请教能方便聊一下吗
git 关于本地分支和远程分支的创建、切换、合并和删除
程序员 Hasity: 你的远程分支呢，没有不要乱打标签好吧
HTML5 常用事件
CSDN-Ada助手: 一定要坚持创作更多高质量博客哦, 小小红包, 以资鼓励, 更多创作活动请看: 新星计划2023: https://marketing.csdn.net/p/1738cda78d47b2ebb920916aab7c3584?utm_source=csdn_ai_ada_redpacket 新星计划2023: https://marketing.csdn.net/p/1738cda78d47b2ebb920916aab7c3584?utm_source=csdn_ai_ada_redpacket 上传ChatGPT/计算机论文等资源，瓜分￥5000元现金: https://blog.csdn.net/VIP_Assistant/article/details/130196121?utm_source=csdn_ai_ada_redpacket 新人首创任务挑战赛: https://marketing.csdn.net/p/90a06697f3eae83aabea1e150f5be8a5?utm_source=csdn_ai_ada_redpacket Microsoft Edge功能测评！: https://activity.csdn.net/creatActivity?id=10403?utm_source=csdn_ai_ada_redpacket 职场解惑讨论会: https://activity.csdn.net/creatActivity?id=10427?utm_source=csdn_ai_ada_redpacket 可持续能源技术真的能改变世界吗？: https://activity.csdn.net/creatActivity?id=10425?utm_source=csdn_ai_ada_redpacket 无效数据，你会怎么处理？: https://activity.csdn.net/creatActivity?id=10423?utm_source=csdn_ai_ada_redpacket 物联网技术正在如何影响我们的生活: https://activity.csdn.net/creatActivity?id=10421?utm_source=csdn_ai_ada_redpacket 生物识别技术能否成为应对安全挑战的绝佳选择？: https://activity.csdn.net/creatActivity?id=10411?utm_source=csdn_ai_ada_redpacket 应届生如何提高职场竞争力: https://activity.csdn.net/creatActivity?id=10409?utm_source=csdn_ai_ada_redpacket 讯飞星火大模型将超越chatgpt？: https://activity.csdn.net/creatActivity?id=10407?utm_source=csdn_ai_ada_redpacket 职场新人备忘录: https://activity.csdn.net/creatActivity?id=10405?utm_source=csdn_ai_ada_redpacket VR vs AR：哪种技术更有潜力改变未来？: https://activity.csdn.net/creatActivity?id=10399?utm_source=csdn_ai_ada_redpacket “裸奔”时代下该如何保护网络隐私: https://activity.csdn.net/creatActivity?id=10401?utm_source=csdn_ai_ada_redpacket 蓝桥杯备赛指南分享: https://activity.csdn.net/creatActivity?id=10317?utm_source=csdn_ai_ada_redpacket
git切换到别的分支,暂时保存当前分支的修改(不进行add 和commit)的方法 git stash
CSDN-Ada助手: IDEA的布局方式也在和VSCode学，你觉的这说明了什么？简洁的力量？

大家在看

最新文章

目录

展开全部

收起

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。