• 2022-11-28
宇哥博客 前端开发 HTML中contenteditable属性 修改样式实时预览

HTML中contenteditable属性 修改样式实时预览

contenteditable是HTML中的一个属性,当标签设置contenteditable="true"时,即能对该标签元素进行编辑。

style标签设置contenteditable后,能在页面直接编辑css样式,实时预览效果。

下面放一小段代码:

<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8">
</head>
<body>
	<style style="display: block;white-space: pre;"  contenteditable>
		body{
			background-color: #ddd;
		}
		.div1{
			border: 1px solid red;
			margin-top: 50px;
		}
		.div2{
			margin-top: 50px;
		}
	</style>
<div class="div1">测试文字</div>
<div class="div2" contenteditable="true">这是一段可编辑的文字</div>
</body>
</html>

页面效果:

图 | 页面

css样式部分可以自由编辑,页面样式实时变化。

更多

开发者工具(F12)打开修改页面样式更方便。

本文来自网络,不代表本站立场,转载请注明出处。http://www.ygbks.com/3764.html

发表评论

您的电子邮箱地址不会被公开。

返回顶部