HTML - ¿Cómo resaltar en color parte de un texto pinchando en un botón?

   
Vista:

¿Cómo resaltar en color parte de un texto pinchando en un botón?

Publicado por Guillermo (3 intervenciones) el 10/04/2014 13:10:56
Pues eso: ¿cómo puedo insertar la acción, de forma que, dando a un botón, ilumine parte de un texto con un color determinado? (De hecho, quiero poner tres botones para iluminar partes de un texto en tres colores distintos).

Gracias.
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de xve

¿Cómo resaltar en color parte de un texto pinchando en un botón?

Publicado por xve (1178 intervenciones) el 10/04/2014 15:10:05
Hola Guillermo, cuando dices iluminar, te refieres a cambiar de color?

Si es así, puedes hacerlo poniendo cada parte del texto entre <span> algo así:

1
<span id="primero">Este es</span> <span id="segundo">el ejemplo</span> <span id="tercero">del texto</span>

De esta manera, al darle a cada uno de los botones, puedes cambiar el color o fondo de esos id's.

No se si me he explicado bien... coméntanos, ok?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar

¿Cómo resaltar en color parte de un texto pinchando en un botón?

Publicado por Guillermo (3 intervenciones) el 12/04/2014 00:26:30
Gracias por tu pronta respuesta.

Lo terminaré consiguiendo. Básicamente, me planteo algo como esto (pero todavía no lo he conseguido!)

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html>
<body>
<button type="button" onclick="color:blue;font-weight:bold">Destacar azul</button>
 
<p>El que pronto se acuesta y pronto se levanta,
es hombre <span id="Destacar azul">saludable</span>,
rico y <span id="Destacar azul">sabio.</p>
 
</body>
</html>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de xve

¿Cómo resaltar en color parte de un texto pinchando en un botón?

Publicado por xve (1178 intervenciones) el 12/04/2014 10:41:34
Hola Guillermo, para hacerlo con Javascript unicamente la manera seria esta:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE html>
<html>
<head>
    <style>
 
    </style>
    <script>
    function cambiarColor()
    {
        var elems=document.getElementsByClassName("DestacarAzul");
        for(var i = 0; i < elems.length; i++)
        {
            elems[i].style.color="#00f";
        }
    }
    </script>
</head>
<body>
<button type="button" onclick="cambiarColor()">Destacar azul</button>
 
<p>El que pronto se acuesta y pronto se levanta,
es hombre <span class="DestacarAzul">saludable</span>,
rico y <span class="DestacarAzul">sabio.</p>
 
</body>
</html>

Con Jquery, se simplifica un poco...

Coméntanos si te sirve, ok?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar

¿Cómo resaltar en color parte de un texto pinchando en un botón?

Publicado por Guillermo (3 intervenciones) el 13/04/2014 18:22:17
¡Perfecto!

Muchas gracias.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar