让网页变得可编辑，学会这个技巧，可以出去大拽了

最新推荐文章于 2025-06-18 17:56:27 发布
原创 最新推荐文章于 2025-06-18 17:56:27 发布 · 2.6k 阅读 · 1 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
标签
#js #javascript #html #html5
本文介绍如何使用contenteditable属性使网页内容变得可编辑，并演示了通过JavaScript代码在浏览器控制台中启用和禁用此功能的方法。

设置页面为可编辑

document.body.contentEditable=true

使用方式在在浏览器中打开对应的网址，如百度

然后按 F12 键盘（在键盘右上方）

在弹出的窗口中选择 console ，然后在空白地方复制上面的代码，点击回车

如下图

                                                                                            原图

编辑后
编辑后

 

为什么会这样呢？

原因 contenteditable 属性可以控制标签是否可以被编辑，所以你如果不想使用了，可以

document.body.contentEditable=false

 

让你的网站可编辑的实现js代码
01-21
非常的简单 一、打开你要黑的网站， 二、在浏览器的地址栏里输入： 代码如下: [removed]document.body.contentEditable=’true’; document.designMode=’on’; void 0 三、现在你会发现他的页面竟然可以任由你自由修改了！！ 四、按照你自己的意图修改好后，在地址栏中输入： 代码如下: [removed]document.body.contentEditable=’false’; void 0 好了，截图吧，把对方网站给“黑”了~~ 嘿嘿，无害的。可以用来吓一吓人，比保存HTML要方便的多
如何使用HTML制作个人网站（ web期末大作业）
网页设计与制作
03-27 4746
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；
修改页面快捷命令document.body.contentEditable=‘true‘；
小清华的小哥哥
08-28 2万+
众所周知 F12可以临时修改网页，达到‘伪造’的目的，但每次都需要找到修改元素的位置才行，不是很方便。 下面有两个快捷命令： 1、进入开发者模式（F12或鼠标右击后选择检查），在开发者模式中进入控制台（ctrl+shift+k或鼠标左击‘控制台’），然后在控制台下方的命令窗口内输入命令document.body.contentEditable='true'; 然后回车，就可以像编辑word文档一样随意编辑原始页面了（ps：此时退出开发者模式也可以继续编辑，只要不刷新页面就行）。 2、同上，进入控制台后，输
document.body.contentEditable让开发者在网页中轻松实现可编辑
码海扬帆：前端探索之旅的博客
05-13 2400
document.body.contentEditable是一个属性，用于控制网页中元素的可编辑性。当你将这个属性设置为"true"时，你就可以在网页上编辑文本内容，包括输入、删除、拖拽等操作，就像在一个富文本编辑器中一样。这个属性常常被用来创建可编辑的网页内容，比如在线文档编辑器、博客编辑界面等。
编辑网页document.body.contentEditable=‘true‘；
小屁孩大帅-保密的博客
07-31 1万+
发现一个好玩的，可以用来编辑网页 打开console输入，即可。 document.body.contentEditable='true';
前端整活神器！只需一行代码，瞬间编辑任意网页，想改哪里改哪里
weixin_42925303的博客
04-15 2420
页面一键编辑
网页转可编辑格式的7大高效方法
最新发布
weixin_44975687的博客
06-18 2420
《网页信息转换为可编辑格式的实用方法》 本文整理了7种网页信息转换方法：1）直接复制粘贴纯文本；2）使用浏览器保存网页功能保留格式；3）在线工具批量处理；4）插件与软件高效转换；5）特殊场景绕过复制限制；6）内容整理编辑技巧；7）不同需求场景的解决方案。涵盖了从简单文本提取到复杂网页转换的全流程，包括保留格式、批量处理、突破复制限制等实用技巧，可根据内容复杂度选择最适合的方案。这些方法平衡了便捷性与功能性，能满足日常办公、资料收集等多种场景需求。
不会还有人在传统网页定位修改，看我用一行JS代码让你的网页变为可编辑
热门推荐
LucianaiB的博客
04-18 10万+
在当今数字化时代，网页内容的修改和编辑是许多开发者和用户常见的需求。传统的网页定位修改方法虽然简单，但效率低下，只能逐个修改元素，且操作繁琐。相比之下，通过一行简单的 JavaScript 代码，可以将整个网页变为可编辑状态，极大地提高了效率和趣味性。传统网页定位修改方法通常需要通过浏览器开发者工具（F12）来定位和修改网页元素。以修改知乎粉丝数量为例，用户需要打开开发者工具，定位到粉丝数量的源码，然后手动修改其值。这种方法虽然直观，但每次只能修改一个位置，且需要重复操作，效率较低。
怎样让网页可编辑？
Eli_Code
08-09 6560
怎样让网页可编辑？ 1.F12打开网页控制台（点击 console） 2.在控制台中输入以下代码： document.body.contentEditable=‘true’ 回车 3.自由编辑网页内容
让你的网页任意一处都变得可编辑
Vgbire的博客
09-08 836
让你网页任意地方可以按你想要的进行编辑修改，包括按钮。感觉挺有意思的，记一下。 以下两个命令任何一个命令都可以。 document.body.contentEditable='true' document.designMode='on'
document.body.contentEditable='true'
qinglangee的专栏
02-21 5135
javascript:document.body.contentEditable='true'; document.designMode='on'; void 0
如何可以修改浏览器页面上的内容
weixin_45582252的博客
06-11 1277
浏览器内部会监听用户对该元素的键盘输入事件、鼠标事件等，然后将用户的输入直接应用到DOM树中，修改元素的文本节点和子节点。，实际上是将整个网页的正文区域都设置成了可编辑状态。用户可以像在文本编辑器中一样，直接点击、输入、删除和修改网页上的内容。是HTML元素的一个全局属性，表示该元素的内容是否可被用户直接编辑。是一种让网页正文（body元素）变为可编辑状态的简单方法。这意味着用户的操作会直接改变页面的DOM结构，而不像普通网页那样是只读的。
编辑网页document.body.contentEditable='true';
scbl2017的博客
04-21 1万+
发现一个好玩的，可以用来编辑网页 打开console输入，即可。 document.body.contentEditable='true';
很有实用价值的神奇代码
平民
08-06 1312
只要你在IE浏览器任意打开一个网站，然后在浏览器上输入如下代码javascript:document.body.contentEditable=true; document.designMode=on; void 0然后回车，你就可以随心所欲的修改这个网站啦！通过这段代码你可以对一些禁止复制内容的网页进行复制了++++++++++++++++++++++++++++++++++++++++
修改网页内容，随心所欲改变网站显示内容
晴天有点孤单
09-03 3万+
javascript:document.body.contentEditable=’true’;document.designMode=’on’;void o然后回车，你就可以随心所欲的修改这个网站啦！输入如下代码，将退出编辑状态！javascript:document.body.contentEditable=’false’;document.designMode=’on’;void o
将浏览页面变为可编辑状态
lixinkuan的博客
08-05 3276
调试过程往往需要直接去掉一些元素，可以同过浏览器执行js来实现页面元素可编辑。 地址栏中键入如下后回车： javascript:document.body.contentEditable='true';document.designMode='on'; void 0 浏览器如果跳转，则需要通过浏览器调试模式进入该状态，按F12找到console控制台功能，输入上面代码回车即可编辑所有元素。 ...
document.body.contentEditable=‘true‘；
wafer_biscuit的博客
07-18 1305
document.body.contentEditable=‘true’;
一段javascript代码让你随意修改任意网页
仿站、源码搭建/迁移技术博客
02-27 2058
首先打开任意网页， 比如quanbaike.com 然后在浏览器地址栏里输入如下代码 javascript:document.body.contentEditable='true'; document.designMode='on'; void 0 然后就可以随意修改页面了。 再在地址栏里输入下面的代码，会退出编辑状态 javascript:document.body.content...
实现编辑网页document.body.contentEditable
JackieDYH的博客
04-26 8745
发现一个好玩的，可以用来编辑网页 打开console输入，即可。 document.body.contentEditable='true'; javascript:document.body.contentEditable='true'; document.designMode='on'; void 0 用鼠标点击网源站的内容，看！ 可以任意修改网页百的内容了 现在你会发现他的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值