Arquivo Discussoes de Programacao e Tecnologia Eu tenho uma variável do tipo string em javascript, essa string aparece na tela quando o usuário aperta um botão, eu preciso que uma palavra nessa string apareça sublinhada, como eu poderia fazer isso?
Se a tag < u > funcionasse em js seria algo do tipo:
var txt2 =
'Lorem <u>ipsum</u> dolor sit amet';
Olá amigo, veja se ter ajuda este código.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Teste</title>
<script type="text/javascript">
window.onload = function(){
var sublinha = document.getElementById("txt");
var botao = document.getElementById("botao");
botao.onclick = function(){
sublinha.style = "text-decoration: underline";
};
};
</script>
</head>
<body>
<p>'Lorem <span id="txt">ipsum</span> dolor sit amet'</p>
<input type="button" id="botao" value="botão"/>
</body>
</html>
Cara, muito obrigado, funciona sim!
Porém eu estou usando uma função que escreve o texto na tela com efeito de máquina de escrever.
Eu deixo o campo de texto vazio e preencho ele através da função JS. Eu uso uma variável do tipo string pra guardar o texto que vai ser escrito, algo do tipo:
<h1 id="t1"></h1> <!-- campo de texto vazio -->
var i = 0;
var txt = 'Seu nome sublinhado.';
var speed = 50;
function typeWriter () {
if (i < txt.length) {
document.getElementById("t1").innerHTML += txt.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
} // função para preencher o campo com efeito de maquina de escrever
Ou seja, eu teria que achar um jeito de salvar a variável ‘txt’ com a palavra “sublinhado” sublinhada.
Existe um jeito de sublinhar uma palavra de uma string?
veja se desta forma resolve
resultado: https://output.jsbin.com/cilihoy
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="[Efeito de maquina de escrever em JavaScript]">
<meta charset="utf-8">
<title>Máquina de escrever</title>
<script type="text/javascript">
window.onload = function(){
var txtTitulo = 'Francisco Chaves. Tecnologia com bits codificados.';
var txt1 = document.getElementById("titulo");
var speed = 100;
var cont = 0;
function typeWriter () {
if(cont < txtTitulo.length){
txt1.innerHTML += "<u>" + txtTitulo.charAt(cont) + "</u>";
cont++;
setTimeout(typeWriter, speed);
}else{
cont = 0;
}
}
typeWriter();
};
</script>
</head>
<body>
<h1 id="titulo"></h1>
</body>
</html>
Brother, você também pode selecionar uma palavra.
Caso seja isso, segue abaixo o código. E se quiser ver funcionando: https://codepen.io/filype-ferreira/pen/EEmyqo
Document body{ font-family: Arial, Helvetica, sans-serif; } h1{ font-weight: normal; font-size: 1rem; } .negrito{ font-weight: bold; }<h1 id="titulo"></h1>
<script>
window.onload = function(){
var txtTitulo = 'Francisco Chaves. Tecnologia com bits codificados.';
var txt1 = document.getElementById("titulo");
var speed = 100;
var cont = 0;
function typeWriter () {
if(cont < txtTitulo.length){
if(cont >= 10 && cont <= 15){
if(cont == 10){
txt1.innerHTML += '<strong id="negrito">' + txtTitulo.charAt(cont);
cont++;
}else if(cont <= 15){
var negrito = document.querySelector('#negrito');
negrito.innerHTML += txtTitulo.charAt(cont);
cont++;
}
}else{
txt1.innerHTML += txtTitulo.charAt(cont);
cont++;
}
setTimeout(typeWriter, speed);
}
}
typeWriter();
};
</script>
Puts então basicamente tenho que contar os caracteres e sublinhar manualmente a parte do texto que eu quero;
Seria tão mais prático se pudéssemos usar tags pra fazer isso dentro das variáveis string por exemplo.
Valeu @Francisco_Chaves e @lype.formiga, Kudos!
Sim, é isso que estava tentando fazer! Valeuuu!
Excelente!!
Parabéns!!