Изменение цвета выделеного текста
Даны 4 радио кнопки сверху и текст снизу. возле кнопок подписаны цвета
при клике на кнопку цвет выделения меняется на тот который был написан как это можно сделать??? |
melnikov24,
сделайте минимальный макет |
выделение цветом
melnikov24,
выделить текст, выбрать цвет.
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.selected{
border-radius: 2px;
padding: 2px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
var btn = $(".color");
btn.click(function() {
styliString(this.value)
});
function styliString(value) {
if (window.getSelection() == '') {
return false;
}
var range = window.getSelection().getRangeAt(0);
var selectionContents = range.extractContents();
var span = document.createElement("span");
span.appendChild(selectionContents);
span.setAttribute("class", "selected");
span.style.backgroundColor = value;
range.insertNode(span);
}
});
</script>
</head>
<body>
<input name="g" type="button" value="Red" class="color">
<input name="g" type="button" value="Yellow" class="color">
<input name="g" type="button" value="Green" class="color">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Itaque si aut requietem natura non quaereret aut eam posset alia quadam ratione consequi. Hanc quoque iucunditatem, si vis, transfer in animum; <b>Quod autem ratione actum est, id officium appellamus.</b> Nec vero sum nescius esse utilitatem in historia, non modo voluptatem. An hoc usque quaque, aliter in vita? Quos quidem tibi studiose et diligenter tractandos magnopere censeo. Duo Reges: constructio interrete. Theophrasti igitur, inquit, tibi liber ille placet de beata vita? <i>Eademne, quae restincta siti?</i> Nummus in Croesi divitiis obscuratur, pars est tamen divitiarum. Potius ergo illa dicantur: turpe esse, viri non esse debilitari dolore, frangi, succumbere. </p>
</body>
</html>
|
рони,
если выделить "Lorem ipsum" и сделать red, потом "ipsum dolor" green (пересечение отрезков), то ipsum останется red надо из selectionContents выкидывать оформление |
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
.selected {
border-radius: 3px;
-webkit-box-decoration-break: clone;
}
::selection {
background: rgba(0, 0, 0, .25);
}
</style>
<script>
function styliString(color) {
const selection = getSelection();
const range = selection.getRangeAt(0);
const selectionContents = range.extractContents();
const span = document.createElement("span");
for(const oldSpan of selectionContents.querySelectorAll(".selected")) {
for(const childNode of [...oldSpan.childNodes])
oldSpan.parentNode.insertBefore(childNode, oldSpan);
oldSpan.remove();
}
selectionContents.normalize();
span.classList.add("selected");
span.style.backgroundColor = color;
span.appendChild(selectionContents);
range.insertNode(span);
}
document.addEventListener("click", ({ target }) => {
if(target.classList.contains("color")) {
styliString(target.dataset.color || target.textContent);
}
});
</script>
</head>
<body>
<button class="color" data-color="#f06">Pink</button>
<button class="color">Gold</button>
<button class="color">Yellowgreen</button>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Itaque si aut requietem natura non quaereret aut eam posset alia quadam ratione consequi. Hanc quoque iucunditatem, si vis, transfer in animum; <b>Quod autem ratione actum est, id officium appellamus.</b> Nec vero sum nescius esse utilitatem in historia, non modo voluptatem. An hoc usque quaque, aliter in vita? Quos quidem tibi studiose et diligenter tractandos magnopere censeo. Duo Reges: constructio interrete. Theophrasti igitur, inquit, tibi liber ille placet de beata vita? <i>Eademne, quae restincta siti?</i> Nummus in Croesi divitiis obscuratur, pars est tamen divitiarum. Potius ergo illa dicantur: turpe esse, viri non esse debilitari dolore, frangi, succumbere.</p>
</body>
</html>
|
Malleys,
:thanks: |
| Часовой пояс GMT +3, время: 09:39. |