如何随意修改网页内容

已于 2023-01-20 22:10:23 修改
阅读量5.6k 收藏 15
点赞数 5
于 2022-11-24 10:02:37 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_69976201/article/details/128012160
版权

JavaScript 开发者工具 contentEditable 网页修改 控制台
关键词由CSDN通过智能技术生成

本蒟蒻第一次发布文章，各位大佬们如果不喜欢，请不要嘲笑！

你是否想过随意修改网页内容的感觉呢？

嘿，其实真能实现！

这也不难，一行代码就能轻松解决。

下面开始保姆级教程：

首先按下Ctrl+Shift+I、Ctrl+Shift+C或者F12，会出现这样的画面：

这就是浏览器自带的开发者工具了。

点击"Console"，也就是控制台，会出现这样的画面：

在有光标的位置写下这行代码：

document.body.contentEditable='True'

 这是一行JavaScript代码，按下Enter键。

然后就可以随意修改网页内容了！如图：

这个改得是不是很不错呀？

可惜，一刷新就恢复了！ 

alphaAXLE
关注
  • 5
    点赞
  • 踩
  • 15
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
如何修改网页中的文本内容改成自己希望的数值？
任聪聪的博客
12-05 2万+
本篇文章主要讲解，通过浏览器命令和浏览器自带的F12开发者工具，进行修改网页内容的方法教程 日期：2021年12月5日 作者：任聪聪 一、通过F12开发者工具进行修改 进入方式汇总： 1.右击鼠标，显示菜单找到审查 2.通过快捷键F12进入，笔记本需要先关闭fnlk功能键。 开发者工具介绍 说明： 1.表示选择元素，点击后可以选择文本的元素所在地 2.表示显示方式，手机还是电脑 3.表示div元素，点击后可以展开，对div内的html和文本进行编辑。 双击文本，即可进行修改成自己想要的，但是刷新后.
神奇的代码 通杀各种网站-可随意修改复制页面内容
09-06
在浏览器地址栏输入这一行代码，然后回车，就发现整个页面都可以随意编辑了。仅仅是一行很短的代码。
网页窜改软件，可以把网页随意改
12-31
想把百度变成嘟嘟吗？用它可以随意修改软件。其实它还可以用来搞定大学英语的网络测试哦。呵呵，你懂的。
【项目实训】前端页面修改1
m0_63711281的博客
05-30 270
因此，在我们完成开发后，我们计划固定某些选项，如大语言模型的选择、知识库的选择等，以使这些细节对用户来说不可修改，从而保持对用户的透明性。设定知识库匹配条数、匹配分数阈值固定，其实这里也可以设定知识库固定，但是暂时未编写，因为我们的数据还未完全上传至知识库中。设置公司列表，并使用streamlit的selectbox设置下拉框，但是这里还未关联到后端，因此切换公司时暂时无反应。暂时修改前端页面使之呈现出我们希望呈现的页面，但是没有关联到后端，没有添加相关动作。修改全部页面的侧边栏设置。
随意修改网页内容（娱乐）
俎树振的博客
04-21 1500
随意修改网页内容（娱乐）
一行代码就能随意修改网页内容
web全栈开发的博客
09-02 1万+
一、打开你想要编辑的网站 我这里拿百度首页做个示范。 二、进入开发者模式 按F12进入开发者模式 。 三、输入神奇代码 1、打开随意编辑网页内容的功能 选择Console，在命令框输入document.designMode='on'后按回车。 这时你可以发现，点到文字处，会出现小光标，这就说明你可以修改这里的内容。 此时直接就可以修改光标处的内容，这里我随便改一下（不是真的改，刷新页面即可恢复原来网页内容）。 2、关闭随意编辑网页内容的功能 选择Console，在命令框...
随意更改网页内容
ltbyuruochengfeng的博客
06-01 494
代码：javascript:document.body.contentEditable='true';document.designMode='on';void0 方法：将代码输入到浏览器中要更改的网页对应的地址栏中。
随意修改网页内容的代码 xg
weixin_30485379的博客
08-17 677
先把这段代码输入到地址栏： javascript:document.body.contentEditable='true'; document.designMode='on'; void 0 然后按enter，之后就可以任意修改网页上的东西了， 修改完后再把这段代码输入到地址栏： javascript:document.body....
一行代码实现随意编辑网页内容
热门推荐
NFstriving的博客
05-08 1万+
一、打开你想要编辑的网站 我这里拿百度首页做个示范 二、进入开发者模式 按F12进入开发者模式 三、输入神奇代码 1、打开随意编辑网页内容的功能 选择Console，在命令框输入document.designMode='on'后按回车 这时你可以发现，点到文字处，会出现小光标，这就说明你可以修改这里的内容 此时直接就可以修改光标处的内容，这里我随便改一下（不是真的改，刷新页面即可恢复原来网...
随意编辑网页内容的简单方法
Hilaph的博客
06-24 7062
只需要一行 document.body.contentEditable='true'; 以谷歌浏览器为例： 1、打开一个网页 2、按F12 3、选择console 在最下面的空行输入document.body.contentEditable='true';并回车 4、然后就可以随意对内容进行编辑了 ...
极酷的javascirpt，让你随意编辑任何网页
10-31
### 极酷的JavaScript：让你随意编辑任何网页 在当今互联网时代，JavaScript作为一种强大的客户端脚本语言，被广泛应用于网页开发之中。今天我们要探讨的就是如何利用JavaScript实现对任意网页的实时编辑功能，以及...
解除网页限制.zip
12-14
其次，解除网页复制限制的代码通常基于JavaScript编写，因为大多数网页内容都是由HTML和CSS呈现，而JavaScript负责动态交互。这种代码会寻找并修改网页中的元素，去除禁止复制的属性或者事件监听器。例如，它可能...
网页制作实验报告.pdf
04-09
- 实验注意事项：实验前应创建根文件夹，避免混乱，不熟悉选项时不要随意更改，以免影响实验结果。 2. **页面图像设置**： - 实验目标：设置页面背景图像和创建鼠标经过图像。 - 实验工具：除了基本的网页设计...
chrome中任意修改网页内容
weixin_43970884的博客
10-18 1万+
作用： 1.去除AdBlock所不能完全清楚的广告 2.修改网页 步骤： 1.F12 2.Console控制台选项卡 3.命令输入框输入 document.body.contentEditable = "true" 回车 5.编辑完成后关闭编辑 document.body.contentEditable = "false" 回车 ...
html调整网页内容位置,网页制作html随意拖动内容位置的两种实现方式
weixin_42522750的博客
06-05 2124
测试：chrome v80.0.3987.122 正常两种方式为：拖拽普通标签位置或拖拽canvas中的文本框位置1. 实现鼠标拖动标签元素到任意位置演示地址css 代码#range {position: relative;width: 600px;height: 400px;margin: 10px;background-color: rgb(133, 246, 250);}.icon {pos...
【React 】开发环境搭建详细指南
lph159的博客
07-24 1233
无论你是刚刚开始学习 React，还是希望在现有项目中采用 React 技术，搭建一个高效的开发环境都是至关重要的。本文将详细介绍如何从零开始搭建 React 开发环境，涵盖所需的工具和最佳实践，帮助你快速启动并顺利进行开发。Visual Studio Code（VS Code）是目前最流行的代码编辑器之一，提供了丰富的扩展和强大的功能。如果你希望对项目的配置有更多的控制，可以选择手动配置 React 项目。下载并安装最新版本的 Node.js，安装 Node.js 后，npm 会自动安装。
VUE中的重点*
qq_61132537的博客
07-22 1086
实际上就是一个闭包，因为vue是单页面应用，是由很多组件构成，每一个组件中都有一个data， 所以通过闭包给每一个组件创建了一个私有的作用域，这样就不会相互影响。
已解决：vue-office/excel 多个sheet点击切换，滚动条高度不重置，表格视图位置不正确
最新发布
weixin_42289080的博客
07-26 227
解决 @vue-office/excel 多个sheet切换，内容以及滚动条展示不正确的问题
尝试编写一个简单的个人网页
05-20
好的，以下是一个简单的个人网页的代码，你可以根据自己的需求进行修改和定制。 ```html <!DOCTYPE html> <html> <head> <title>个人网页</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> body { margin: 0; padding: 0; font-family: Arial, sans-serif; background-color: #f2f2f2; } header { background-color: #333; color: #fff; padding: 20px; text-align: center; } h1 { margin: 0; font-size: 36px; } nav { background-color: #555; color: #fff; padding: 10px; text-align: center; } nav ul { list-style-type: none; margin: 0; padding: 0; display: flex; justify-content: center; } nav li { margin: 0 10px; } nav a { color: #fff; text-decoration: none; font-size: 18px; font-weight: bold; } section { padding: 20px; margin: 20px; background-color: #fff; border-radius: 10px; box-shadow: 0 0 10px rgba(0,0,0,0.2); } footer { background-color: #333; color: #fff; padding: 10px; text-align: center; } footer p { margin: 0; font-size: 14px; } </style> </head> <body> <header> <h1>个人网页</h1> </header> <nav> <ul> <li><a href="#">首页</a></li> <li><a href="#">关于我</a></li> <li><a href="#">联系我</a></li> </ul> </nav> <section> <h2>欢迎访问我的个人网页</h2> <p>这是一个简单的个人网页，用于展示我的个人信息和作品。</p> <p>请随意浏览，如果您有任何问题或建议，请通过联系方式联系我。</p> </section> <footer> <p>版权所有 © 2021 我的个人网页</p> </footer> </body> </html> ``` 这是一个非常基础的网页模板，包含了一个简单的导航栏、一个主要内容区域和一个页脚。你可以根据需要添加更多的页面和内容，或者修改样式和布局。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值