DIV常見用法有哪些-創(chuàng)新互聯(lián)

這篇文章主要介紹了DIV常見用法有哪些，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

專注于為中小企業(yè)提供做網(wǎng)站、成都網(wǎng)站設(shè)計服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)玉泉免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動了數(shù)千家企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。

1.啟用div作為編輯器
讓div進(jìn)入編輯狀態(tài)很簡單，只需要：

代碼如下:

div.contentEditable=true;

這樣就可以進(jìn)入編輯狀態(tài)。當(dāng)然你直接在html中設(shè)置contenteditable也是可以的。
總的來說，實(shí)現(xiàn)可視化編輯，可以使用contentEditable和designMode兩種方法。contentEditable剛開始在IE上實(shí)現(xiàn)，后來各大瀏覽器陸續(xù)支持contentEditable，HTML5標(biāo)準(zhǔn)也包含contentEditable。designMode只能把document整體改成可編輯狀態(tài)，但contentEditable可以把任何HTML元素改成可編輯狀態(tài)，應(yīng)用范圍比designMode廣，用 contentEditable是將來的趨勢。
contentEditable與draggable有時是沖突的，當(dāng)contentEditalbe=true時，一般要將draggable(如果有的話)設(shè)為false，否則不能編輯。
2.編輯div內(nèi)容的時候，支持回車確認(rèn)修改：
這個實(shí)現(xiàn)很簡單，事件回調(diào)中判斷一下event的鍵值就可以了：

代碼如下:

htmlElement.contentEditable = false;
if (event.keyCode == 13) {
htmlElement.blur();
}

3.判斷是否按下Shift+Enter，按下則換行
這個實(shí)現(xiàn)道理同上，比較簡單：

代碼如下:

if(event.shiftKey && event.keyCode==13) {
return;
}

這個是在Chrome上的實(shí)現(xiàn)，不用做任何處理，直接return返回即可。在FireFox中需要這樣添加<br>來實(shí)現(xiàn)換行：

代碼如下:

if(event.shiftKey && event.keyCode==13) {
var text = htmlElement.textContent;
htmlElement.innerHTML = text + '
';
return;
}

4.編輯div內(nèi)容的時候，禁止換行
這里看與內(nèi)容編輯超出后如何處理相關(guān)的幾個CSS屬性：

代碼如下:

width: 80px; ----這行限制了div的寬度。
text-overflow:clip; ---多出的文本不換行也不省略。（這行如果設(shè)置成ellipsis則溢出時顯示省略標(biāo)記（...））
white-space:nowrap; -----強(qiáng)制文本在一行內(nèi)顯示
overflow:hidden; ------------------將溢出文本隱藏
word-wrap: break-word;------設(shè)置自動換行

通常設(shè)置前面2個就可以達(dá)到效果，如果有一些其他的需求，可以加上后面的幾個屬性。
5.去掉編輯時的div周圍的焦點(diǎn)框
在CSS中設(shè)置outline:none;或者設(shè)置outline:0;即可。
6.Div進(jìn)入編輯狀態(tài)后選中所有的文本
這個使用selection對象的modify(alter, direction, granularity)方法可以實(shí)現(xiàn)。該方法用于改變焦點(diǎn)的位置，或擴(kuò)展、縮小selection的大小。使用這個方法的可以實(shí)現(xiàn)多種全選，移動焦點(diǎn)等操作。下面是各個參數(shù)的含義：
alter：改變的方式?！眒ove”，用于移動焦點(diǎn)；”extend”，用于改變selection。
direction：移動的方向?？蛇x值forward | backword或left | right。
granularity：移動的單位或尺寸?？蛇x值，character", "word", "sentence", "line", "paragraph", "lineboundary", "sentenceboundary", "paragraphboundary", or "documentboundary"。
Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1以后的版本才會支持此函數(shù)，官方文檔：https://developer.mozilla.org/en/DOM/Selection/modify。
下面的例子是當(dāng)div進(jìn)入編輯狀態(tài)后，選中所有文本：

代碼如下:

if (window.getSelection) {
var sel = window.getSelection();
sel.modify('move','left','documentboundary');
sel.modify('extend','right','documentboundary');
}

遺憾的是FireFox的實(shí)現(xiàn)不支持"sentence", "paragraph", "lineboundary", "sentenceboundary", "paragraphboundary", "documentboundary"參數(shù)。需要修改一下思路，用line參數(shù)實(shí)現(xiàn)：

代碼如下:

7. 設(shè)置div的滾動條自動滾到最后的位置
這里要用到div的幾個有用的屬性：scrollTop、scrollLeft、scrollWidth、scrollHeight。先看下面的實(shí)現(xiàn)示例：

代碼如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/tupian/20230522/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="keywords" content="滾動條, scrollbar, 頁面底部, 聊天窗口, " />
<meta name="description" content="有些時候（如開發(fā)聊天程序），我們需要將將滾動條（scrollbar）保持在最底部，比如聊天窗口，新發(fā)出和收到的信息要顯示在最下方，如果要看到最下方的內(nèi)容，就必須保證滾動條保持在最底部。"/>
<title>將滾動條（scrollbar）保持在最底部的方法 - 滾動條, scrollbar, 頁面底部, 聊天窗口, </title>
</head>
<body>
<div id="example">
<h4 id="example_title">將滾動條（scrollbar）保持在最底部的方法</h4>
<div id="example_main">

<script type="text/javascript">
function add()
{
var now = new Date();
var div = document.getElementById('scrolldIV');
div.innerHTML = div.innerHTML + 'time_' + now.getTime() + '
';
div.scrollTop = div.scrollHeight;
}
</script>
<span class="notice">請點(diǎn)擊“插入一行”按鈕，插入新信息，當(dāng)出現(xiàn)滾動條時，滾動條將自動保持在底部。</span>

<div id="scrolldIV" ></div>
<input type="button" value="插入一行" onclick="add();">

</div>
</div>
</body>
</html>

滾動到最下面就是設(shè)置div.scrollTop = div.scrollHeight;即可。scrollHeight是內(nèi)部元素的絕對寬度，包含內(nèi)部元素的隱藏的部分。scrollLeft 也是類似道理，滾動到最右邊的話就是設(shè)置div.scrollLeft = div.scrollWidth;即可。
此外，結(jié)合div的offsetHeight，offsetLeft等自身相關(guān)度量屬性，可以很方便進(jìn)行滾動條位置的控制。
8.div輸入框高度自適應(yīng)
高度自適應(yīng)的意思是說：隨著輸入的行數(shù)越來越多，輸入框會越來越高，當(dāng)?shù)揭欢ǜ叨群笤俪霈F(xiàn)垂直的滾動條。
作為多行文本域功能來講，textarea滿足了我們大部分的需求。然而，textarea有一個不足就是不能像普通div標(biāo)簽一樣高度可以跟隨內(nèi)容自適應(yīng)。textarea總是高度固定的。有時候，為了增加交互體驗(yàn)想讓文本域高度自適應(yīng)的時候，就會遇到麻煩。當(dāng)然，你還是可以通過使用JS來控制高度，實(shí)現(xiàn)自適應(yīng)。實(shí)際上，這里我們就可以使用div去模擬這樣的效果。下面是來自網(wǎng)友的一個實(shí)現(xiàn)：
HTML代碼：

代碼如下:

對應(yīng)的CSS代碼：

代碼如下:

.testbox {
width: 400px;
min-height: 120px;
max-height: 300px;
margin-left: auto;
margin-right: auto;
padding: 3px;
outline: 0;
border: 1px solid #a0b3d6;
font-size: 12px;
word-wrap: break-word;
overflow-x: hidden;
overflow-y: auto;
}

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“DIV常見用法有哪些”這篇文章對大家有幫助，同時也希望大家多多支持創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司，，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識等著你來學(xué)習(xí)!

文章題目：DIV常見用法有哪些-創(chuàng)新互聯(lián)
本文URL：http://bm7419.com/article46/dihphg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站制作、網(wǎng)站維護(hù)、ChatGPT、外貿(mào)網(wǎng)站建設(shè)、云服務(wù)器、網(wǎng)站營銷

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容