¿Cómo diseñar texto en jQuery? -- jquery campo con html campo con css campo con text campo con styling camp Relacionados El problema

How to style text in JQuery?


2
vote

problema

Español

Quiero formar parte de mi texto en negrita y más grande que otra parte del texto. Pero actualmente con el jQuery que estoy usando, todo el texto resulta del mismo tamaño, la fuente de peso y color. Por ejemplo, desde mi primer bit en el código, a continuación, quiero "Duro disco: dispositivo de almacenamiento secundario" para aparecer. Quiero un disco duro para estar en negrita y el encabezado. Quiero la otra mitad de peso normal de la fuente un más pequeño. ¿Cómo puedo decir esto en jQuery o CSS con el código que tengo? :)

Si puede ayudarlo, sería realmente apreciado!

Aquí está mi consulta J:

  $('#harddrive').hover(function() { $('#info').text('Hard drive: Secondary Storage Device'); }, function() { $('#info').text(''); });  $('#cd').hover(function() { $('#info').text('CD: External Secondary Storage Device'); }, function() { $('#info').text(''); });  $('#fan').hover(function() { $('#info').text('Fan: Used to keep the computer cool'); }, function() { $('#info').text(''); });  $('#powerblock').hover(function() { $('#info').text('Power Block: Provides power to the computer'); }, function() { $('#info').text(''); });   
Original en ingles

I want to make part of my text Bold and bigger than another part of text. But currently with the jquery I'm using the text all turns out the same size, font weight and colour. For example from my first bit on code bellow I want "Hard drive: Secondary Storage Device" to appear. I want Hard Drive to be in bold writing and the header. I want the other half normal font weight an smaller. How do I style this in jquery or css with the code I have?:)

If you can help it would be really appreciated!

Here is my j query:

$('#harddrive').hover(function() { $('#info').text('Hard drive: Secondary Storage Device'); }, function() { $('#info').text(''); });  $('#cd').hover(function() { $('#info').text('CD: External Secondary Storage Device'); }, function() { $('#info').text(''); });  $('#fan').hover(function() { $('#info').text('Fan: Used to keep the computer cool'); }, function() { $('#info').text(''); });  $('#powerblock').hover(function() { $('#info').text('Power Block: Provides power to the computer'); }, function() { $('#info').text(''); }); 
              
   
   

Lista de respuestas

4
 
vote
vote
La mejor respuesta
 

Debe cambiar el HTML y usar .html() y NO .text() .

Por ejemplo:

  $('#info').html('<h3>Hard drive:</h3> Secondary Storage Device');   
 

You need to change the HTML and use .html() and not .text().

For example:

$('#info').html('<h3>Hard drive:</h3> Secondary Storage Device'); 
 
 
 
 
4
 
vote

Uso .html() en lugar de .text()666666666. Si desea que establezca su texto.

Aquí hay un ejemplo:

  $('#harddrive').hover(function() { $('#info').html('<h3><b>Hard drive:</b></h3> Secondary Storage Device'); }, function() { $('#info').html(''); });   
 

Use .html() instead of .text() if you want to style your text.

Here is an example:

$('#harddrive').hover(function() { $('#info').html('<h3><b>Hard drive:</b></h3> Secondary Storage Device'); }, function() { $('#info').html(''); }); 
 
 
1
 
vote

No puedes, siempre y cuando solo estés usando texto simple como contenido. Use HTML en su lugar, y puede diseñar el encabezado como usted, por favor:

  $('#cd').hover(    function() {      $('#info').html('<span class="header">CD:</span> External Secondary Storage Device');    },     function() {      $('#info').empty();    });   
  .header {    font-size: larger;    font-weight: bold;  } 
  CAST(TRACER_YIELD AS FLOAT), 0  
 

You can't, as long as you're only using plain text as the content. Use HTML instead, and you can style the header as you please:

$('#cd').hover(    function() {      $('#info').html('<span class="header">CD:</span> External Secondary Storage Device');    },     function() {      $('#info').empty();    });
.header {    font-size: larger;    font-weight: bold;  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>    <a id="cd" href="#">CD</a>    <div id=info></div>
 
 
1
 
vote

prueba algo como

  CAST(TRACER_YIELD AS FLOAT), 111  
 

Try something like

$('#info').html('<b>Hard drive</b>: Secondary Storage Device'); 
 
 
0
 
vote

Puede usar el .text()12 . Uso de CAST(TRACER_YIELD AS FLOAT), 3 Puede recuperar el valor de una propiedad CSS, o puede usar CAST(TRACER_YIELD AS FLOAT), 4 para configurarlo.

Si desea que su texto sea audaz, use CAST(TRACER_YIELD AS FLOAT), 5 .

 

You can use JQuery's $('#info').css(). Using $('#info').css(propertyName) you can retrieve the value of a CSS property, or you can use $('#info').css(propertyName, value) to set it.

If you want your text to be bold, use $('#info').css('font-weight', 'bold').

 
 
0
 
vote

Crear una clase en CSS

  CAST(TRACER_YIELD AS FLOAT), 6  

y luego agregue la clase a #info solo en la función de flotación que desea

  CAST(TRACER_YIELD AS FLOAT), 7  
 

Create a class on CSS

.bold{ font-weight:bold; } 

and then add the class to the #info only on the hover function that you want

$( "#info" ).addClass( "bold" ); 
 
 

Relacionados problema

0  ¿Cómo usar iconos en lugar de IMG en forma seleccionada?  ( How to use icons instead of img in select form ) 
Tengo que crear la lista desplegable con el formulario de selección. Quiero usar los iconos de Fontawesome: "Fa-Angle-Down" (cuando la lista no está seleccion...

25  PLAJO DE PLAZO DE PLASE DE PLASE DE ESTABLING WPF C #  ( Styling gridsplitter wpf c sharp ) 
Quiero de estilo My GridSplitter como agregar puntos en él (como se encuentra en http : //msdn.microsoft.com/en-us/library/aa970265.aspx ). También quiero ...

1  Aplique el estilo de la envoltura de Word a las etiquetas del eje de la gráfica EXT JS  ( Apply word wrap style to ext js chart axis labels ) 
Estoy trabajando en una tabla de EXTJS. Las etiquetas del eje de la tabla está teniendo textos largos. En los bordes de la tabla, los textos se cortan. ¿Cómo ...

14  ¿Cómo cambiar el estilo de una etiqueta <select> 's <optgroup>?  ( How to change the style of a selects optgroup label ) 
Tengo una caja de selección simple con un grupo de opciones en mi aplicación. jQuery.remove()4 Cuando se muestra en el navegador, la etiqueta de la opci...

0  Gatsby.js Estilos globales persistiendo a pesar de cambiar y eliminar los estilos  ( Gatsby js global styles persisting despite changing and removing the styles ) 
Estoy trabajando en un componente de tema ligero / oscuro donde cambian las propiedades de fondo y color de los blogs. Sin embargo, después de ejecutar el cód...

1  Cómo establecer el color de fondo del área de la trama de la tabla usando OpenPyXl  ( How to set background color of plot area of chart using openpyxl ) 
Me gustaría cambiar el color de fondo de un gráfico, como en este ejemplo , utilizando OpenPyXl. En una discusión de Google Group, encontré el siguiente fr...

0  Pestañas de estilo de ActionBar Sherlock  ( Styling tabs of actionbar sherlock ) 
Así que estoy tratando de diseñar mis pestañas de mi Barra de acción, que he implementado utilizando la Biblioteca ActionBarsherlock. He logrado diseñar el ba...

7  Heredar propiedades CSS  ( Inherit css properties ) 
Tengo solo un conocimiento básico de CSS, es posible heredar una propiedad de un estilo a otro estilo. Así que, por ejemplo, podría heredar el tamaño de la fu...

1  Cómo tener diferentes colores en un cuadro de texto WPF  ( How to have different colors in a wpf textbox ) 
¿Es posible tener una pantalla de texto de WPF readonly los primeros 3 caracteres de un color y los 7 caracteres restantes de un color diferente? El mejor eje...

2  Cómo obtener texto negativo Shadow (Android)  ( How to get negative text shadow android ) 
Quiero que mi sombra de texto aparezca reversa (por encima del texto) en lugar de por debajo del texto. ¿Hay alguna manera de tener un valor negativo "dy" com...




© 2022 respuesta.top Reservados todos los derechos. Centro de preguntas y respuestas reservados todos los derechos