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" mce-contenteditable="true">这是一段可编辑的文字</div>
</body>
</html>

页面效果：

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

更多功能：开发者工具（F12）打开修改页面样式预览更方便。

👋 感谢您的观看！

版权声明 1、文章版权归作者所有，未经允许请勿转载。
2、本站所有文章，如无特殊说明或标注，均为本站原创发布。任何在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们邮箱：526009505@qq.com进行处理。
3、咨询请联系QQ：526009505

THE END