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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。