第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全，請及時綁定郵箱和手機(jī)立即綁定
已解決430363個問題，去搜搜看，總會有你想問的

更改 div 中所選文本的字體顏色

更改 div 中所選文本的字體顏色

楊__羊羊 2022-08-27 14:59:37
我有一個事件監(jiān)聽div，以便在用戶選擇文本時發(fā)出通知。我通過獲得選定的文本，但我也想通過給出字體顏色來標(biāo)記該特定文本，但不知道如何。我無法向該特定選擇范圍添加范圍。任何想法如何實現(xiàn)這一目標(biāo)？假設(shè)我有div，如下所示mouseUpwindow.getSelectoin().toString()<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut laboreet dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laborisnisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velitesse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,sunt in culpa qui officia deserunt mollit anim id est laborum</div>因此，如果用戶在其中選擇了一些文本，我應(yīng)該用一些字體顏色標(biāo)記它。字體顏色應(yīng)永久粘貼文本。所以我不能使用：：選擇。提前致謝
查看完整描述

3 回答

?
萬千封印

TA貢獻(xiàn)1891條經(jīng)驗 獲得超3個贊

我認(rèn)為你需要的是CSS，而不是任何JS腳本：


您可以使用屬性：::selection


你可以運(yùn)行下面的代碼片段（ 代碼參考和更多），希望這會幫助你


.example-color::selection {

  color: #8e44ad;

}

.example-background-color::selection {

  background-color: #f1c40f;

}

.example-background::selection {

  background: #e74c3c;

}

.example-both::selection {

  background-color: #8e44ad;

  color: white;

}

.example-shadow::selection {

  text-shadow: 1px 1px 0 #27ae60;

}

.example-input::selection {

  background: #2ecc71;

}

.example-textarea::selection {

  background: #34495e;

  color: white;

}

body {

  font-family: 'Source Sans Pro', Arial, sans-serif;

  line-height: 1.45;

  background: #E0DCCC;

  color: #333;

  padding: 1em;

  font-size: 18px;

}


p,input,textarea  {

  margin-bottom: 1em;

}

input,textarea {

  display: block;

  font-size: 1em;

  font-family: inherit;

}

<p>Select me to see normal behavior.</p>

<p class='example-color'>Try selecting me for a different text color.</p>

<p class='example-background-color'>You can select me for a different background color.</p>

<p class='example-background'>You can also select me for a different background.</p>

<p class='example-both'>Guess what&hellip; you can select me for a different background color and text color.</p>

<p class='example-shadow'>How about a text-shadow? Sure, select me for a different text-shadow.</p>

<p class='example-background-color'>

  What about nest elements? Select me for a different background color.

  <span class='example-color'>And this sentence is just a color selection.</span>

  Nesting works!

</p>

<input class='example-input' type='text' value='Inputs work!*'>

<textarea class='example-textarea' cols='30' name='' rows='10'>Textarea, too!*</textarea>

<div class='foot-notes'>*not Safari</div>


查看完整回答
反對 回復(fù) 2022-08-27
?
慕運(yùn)維8079593

TA貢獻(xiàn)1876條經(jīng)驗 獲得超5個贊

最后，經(jīng)過一天的谷歌搜索，我能夠?qū)崿F(xiàn)這一目標(biāo)。萬一將來有人需要這個:P我所做的是 - 使包裝器div與內(nèi)容可編輯真實并使用document.execCommand api進(jìn)行所需的自定義。注意：但是我不會讓用戶在下面的處理程序中使用 preventDefault 編輯內(nèi)容


        onCut={(e)=>e.preventDefault()}

        onPaste={(e)=>e.preventDefault()}

        onKeyPress={(e)=>e.preventDefault()}

        onKeyDown={(e)=>e.preventDefault()}``` Thanks for helping


查看完整回答
反對 回復(fù) 2022-08-27
?
慕田峪4524236

TA貢獻(xiàn)1875條經(jīng)驗 獲得超5個贊

你可以借助CSS，如果CSS可以處理某些事情，請不要去JS。在樣式表中添加此樣式


::selection {

    color: red;

    background: yellow;

 }


查看完整回答
反對 回復(fù) 2022-08-27
  • 3 回答
  • 0 關(guān)注
  • 182 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

 公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號