html编辑css、div代替文本域

时间 2019-11-12

标签 html 编辑 css div 代替文本栏目 HTML 繁體版

原文原文链接

在浏览器窗口中能够修改style的样式，而且网页会同步显示效果，这样作并无什么实际的开发用途，只是一个比较好玩的html知识。html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body style {
            display: block;/*让样式在html页面中能够显示*/
            white-space: pre-wrap;/*让样式在html页面中换行 显得美观*/
        }
    </style>
</head>

<body>
    <style contenteditable="true">/*让样式在html页面中能够被编辑*/
        .div {
            height: 400px;
            color: #f00;
            font-size: 18px;
        }
    </style>
    <div class="div">
        我是div中的内容
    </div>
</body>

</html>

这样样式就能够在html页面中编辑了，所操做的元素样式也会及时改变。html5

contenteditable 属性是html5的一个全局属性，规定是否可编辑元素的内容，并不常用，谁没事会容许别人修改本身的网页。jquery

可是有一个用途是，它能够替代textare这个标签的用途，html中的textare元素默认不会随着输入的行数自动增高，这在某些用途下不方便，例如写对话框，特色是在必定高度内能够随着输入的行数增高。这个功能使用textarea作会很麻烦，因此能够使用一个可编辑的div框来代替。浏览器

<div contenteditable="true">
        我是可编辑的div框
</div>

这样能够控制div的样式模拟输入文本域，取值设值的使用能够用innerHTML或者jquery的text()、html()等方法。重要的是能够设置max-height属性，在最大高度内容许自动增高。spa

我的总结笔记，有误请指出，谢谢！code