#javascript #css #dom #visibility #getelementsbytagname
#javascript #css — файл #дом #видимость #getelementsbytagname #css #dom
Вопрос:
Я создал инструмент для изучения, используя Javascript и PHP. Есть переключатель, который показывает / скрывает ключевые слова в абзаце, поэтому пользователь может мысленно «заполнить пробелы».
Как я это делал до сих пор, так это то, что все ключевые слова подчеркнуты, и я использую селектор DOM для выбора всех тегов innerHTML в u.
<p>
Example sentence, <u>this</u> is a <u>keyword</u>.
</p>
<button onClick='hideKeywords()'>Hide Keywords</button>
<script>
function hideKeywords() {
var x = Array.from(document.getElementsByTagName('u'));
for (var i = 0; i < x.length; i ) {
x[i].style.visibility = "hidden";
}
}
</script>
Это работает так, как задумано — «ключевые слова» не отображаются, и поток документа не изменяется, поскольку ключевые слова по-прежнему занимают то же место, что и обычно.
Одним из недостатков является то, что в абзацах с особенно длинными «ключевыми словами» нарушается структура строк абзаца, и создается впечатление, что текст просто случайным образом перемещается в пространстве. Это было бы исправимо, если бы я мог каким-то образом изменить видимость таким образом, чтобы слова в ключевых словах были скрыты, а оформление текста (подчеркивание) все еще отображалось. При этом сохраняется структура строки.
Я думал об использовании Javascript для замены каждого символа в ключевом слове подчеркиванием, но возникли еще две проблемы. Во-первых, даже если количество символов останется прежним, ширина может измениться.. Например, «apple» имеет разную физическую длину с «______». Это не идеально, поскольку поток документов изменился бы. Вторая проблема заключается в том, что я не могу придумать никакого способа вернуть ключевые слова обратно после преобразования их в подчеркивания.
Одним из обходных путей является то, что вместо изменения видимости на «скрытый» я мог бы изменить цвет фона на тот же цвет, что и текст. Это блокирует текст, но структура строк и поток документов сохраняются. Тем не менее, я надеюсь найти способ реализовать мою оригинальную идею, поэтому приветствую любое предложение!
Обновление: я бы предпочел не добавлять никаких дополнительных divs к ключевым словам. Пользователь может добавлять новые записи с помощью редактора расширенного текста, поэтому объявить ключевое слово так же просто, как подчеркнуть его в текстовом редакторе.
Комментарии:
1. используйте нижнюю границу сплошной линией
2. Ширина @JaromandaX
bottom-border
не может быть изменена.3. @JaromandaX Спасибо, но это не работает. Когда я меняю видимость на «скрытую», нижняя граница тоже скрывается.
4. Какой у вас размер шрифта?
5. @Jodast Размер шрифта равен 20px. Мне любопытно, как это может что-то изменить?
Ответ №1:
Вы можете сделать это с помощью css, добавив псевдоэлемент и вместо использования visibility hidden, используя color: transparent, вот так:
u{
position:relative;
}
u::after{
content: ' ';
display:block;
position:absolute;
bottom:0;
left:0;
width: 100%;
height:1px;
background-color:#000;
}
И в скрипте
<script>
function hideKeywords() {
var x = Array.from(document.getElementsByTagName('u'));
for (var i = 0; i < x.length; i ) {
x[i].style.color = "transparent";
}
}
</script>
Комментарии:
1. Это сработало великолепно, большое вам спасибо! Мне просто нужно удалить исходное подчеркивание в теге u, чтобы избежать получения слишком толстой линии.
2. Я обнаружил небольшую проблему с вашим решением. Кажется, что когда подчеркнутый текст (ключевые слова) переходит в новую строку, добавленное подчеркивание исчезает. Это немного проблематично, так как мой сайт оптимизирован для мобильных устройств и текстовые разрывы постоянно меняются. Знаете ли вы какие-либо решения? Большое спасибо!
3. @Panpaper можете ли вы привести мне более подробный пример? я пытаюсь использовать ключевые слова во всех местах и не могу их найти.
4. Итак, возьмите это следующее предложение в качестве примера. В этом предложении есть подчеркнутый раздел <u>, который действительно длинный и переходит в новую строку</u>. В этом сценарии дополнительное подчеркивание, которое мы добавили с помощью «u::after», не отображается.
5. @Panpaper Вы можете поместить «каждое ключевое слово long» в <u></u> и псевдоэлементы просто начинаются с каждого из них, вот так: <u> это </u> <u>на самом деле </u> <u>удлиняет </u> <u>и </u> <u>разбивает </u> <u>на </u> <u> </u> <u>новое </u> </u> </u> <u>строка</u>
Ответ №2:
Я бы, вероятно, реализовал это с помощью вашего второго метода. Установите цвет текста таким же, как у фона, затем добавьте нижнюю границу к элементу. Сохраняет интервал и позволяет быстро проверить, правы ли вы, просто выделив строку. Кроме того, если вы присвоите ключевому слову wrapper element класс, вы можете легко просто переключить цвет скрытого текста и сохранить подчеркивания, чтобы вы могли видеть, что изменилось.
div {
color: black;
}
span {
color: white;
text-decoration: none;
border-bottom: 2px solid green;
}
<div>
This <span>is hidden</span> with an underline
</div>
Ответ №3:
Вам пришлось бы найти какой-то способ расположить div под скрытым текстом, но вы можете использовать следующий код для создания div с шириной текста. Возможно, я вернусь позже после ответа и найду способ расположить div.
Допустим, в вашем HTML есть фраза, foo bar
, которую вы хотите скрыть. Вы присвоите ему идентификатор с помощью кода: <p id="foo">foo bar</p>
Вот CSS:
#foo {
position: absolute;
visibility: hidden;
height: auto;
width: auto;
white-space: nowrap;
}
Затем в вашем Javascript вы можете использовать следующий код:
var fontSize = 20; //this defines a font size
var foo = document.getElementById("foo");
foo.style.fontSize = fontSize; //this sets the style as the font size
var width = (foo.clientWidth) "px"
var div = document.createElement("div");
div.style.width = width;
div.style.height = 2px;
div.style.background = "red"; //makes the underline visible
document.getElementById("main").appendChild(div);
Отсюда вы, вероятно, могли бы просто изменить расположение div так, как вы хотите, чтобы он отображался под текстом. Таким образом, div — это точная длина текста.
Альтернативным решением было бы использовать моноширинный шрифт, а затем вручную рассчитать ширину.
Комментарии:
1. Спасибо за подробный ответ! К сожалению, это добавляет некоторую зависимость от размера шрифта, что может быть не очень хорошо для мобильных представлений. Веб-сайт разработан так, чтобы быть адаптивным, и размер шрифта может динамически меняться при просмотре на мобильных устройствах.