Añadir a una clase CSS usando jQuery -- jquery campo con css camp Relacionados El problema

Add to a css class using JQuery


9
vote

problema

Español

es posible agregar / actualizar una clase CSS usando jQuery.

Sé que puedo agregar CSS a un elemento DOM usando este Agregar regla de CSS usando jQuery , pero me gustaría agregar / eliminar de la propia clase CSS.

Original en ingles

Is it possible to add/update a css class using JQuery.

I know I can add css to a DOM element using this add css rule using jquery, but I would like to add/remove from the css class itself.

     
       
       

Lista de respuestas

14
 
vote
vote
La mejor respuesta
 

No puede actualizar directamente las clases CSS en un archivo CSS separado con jQuery. Sin embargo, podría crear una etiqueta key19 y agregar / sobrescribir una clase CSS:

  internal static T GetInstanceField<T>(object instance, string fieldName) { BindingFlags bindFlags = BindingFlags.Instance | BindingFlags.Public | BindingFlags.NonPublic     | BindingFlags.Static; FieldInfo field = type.GetField(fieldName, bindFlags); return field.GetValue(instance); } 0  

Al actualizar una clase CSS, deberá cuidar la orden en cascada . De lo contrario, puede que no se convierta en el efecto que buscas.

 

You cannot directly update the CSS classes in a separate css file with jQuery. You could however create a <style> tag and add/overwrite a CSS class:

$('<style>.newClass { color: red; }</style>').appendTo('body'); 

When updating a CSS class, you'll need to take care the cascading order. Otherwise, it may not turn out to be the effect you are after.

 
 
       
       
7
 
vote

Si entiendo lo que está tratando de hacer, creo que esto debería funcionar para usted.

  internal static T GetInstanceField<T>(object instance, string fieldName) { BindingFlags bindFlags = BindingFlags.Instance | BindingFlags.Public | BindingFlags.NonPublic     | BindingFlags.Static; FieldInfo field = type.GetField(fieldName, bindFlags); return field.GetValue(instance); } 1  

Sería mejor tener clases pequeñas lógicas, y usarla método key22//apery .

  internal static T GetInstanceField<T>(object instance, string fieldName) { BindingFlags bindFlags = BindingFlags.Instance | BindingFlags.Public | BindingFlags.NonPublic     | BindingFlags.Static; FieldInfo field = type.GetField(fieldName, bindFlags); return field.GetValue(instance); } 3  
 

If I understand what you are trying to do I believe this should work for you.

$("#UniqueName").remove();  $("<style id="UniqueName" type='text/css'> .MyClass{ color:#f00 !important; font-weight:bold !important;} </style>").appendTo("head"); 

It'd be best to have logical small classes, and use jQuery's .toggleClass() method.

.Bold{ font-weight:bold; } .Italic {font-style:italic;}  function SwitchFont(){ $(".MyObjects").toggleClass("Bold"); $(".MyObjects").toggleClass("Italic"); } 
 
 
6
 
vote

Es demasiado fácil usar las últimas versiones de jQuery, usando algo como esto:

  $('jQuery selector').css({"css property name":"css property value"});   

Por ejemplo:

  $('#MyDiv').css({"background-color":"red"});   
 

It's too easy using the lastest versions of Jquery, using something like this:

$('jQuery selector').css({"css property name":"css property value"}); 

For example:

$('#MyDiv').css({"background-color":"red"}); 
 
 
2
 
vote
  1. Tengo el mejor ejemplo de cómo aplicar la clase CSS en múltiples etiquetas.
  2. Primero cree una página html simple y dentro de su CSS.
  3. Siguiente creará una consulta simple y aplica CSS personalizada.
  4. Ahora, si desea aplicar qué etiqueta o atribuye CSS usando jQuery.
  5. cuando escribo este código para entender fácilmente

    Código:

      <!DOCTYPE html>   <html>     <head>       <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>     <script>       $(document).ready(function(){         $("#btn1").click(function(){           $("h1,p").toggleClass("blue");           $("div").toggleClass("important");         });       });       </script> <style>  .important {     font-weight: bold;     font-size: 40px;     color: chartreuse;  } .blue{     color: #000080;  } </style> </head>              <body>   <h1>This is example</h1>   <p>This is example</p>   <div>Some important message </div>   <button id="btn1">Add class </button> </body> </html>   
 
  1. I have best example of how to apply CSS class in multiple tags.
  2. First create simple html page and inside write down your css.
  3. Next you create simple Query and and apply custom css.
  4. Now if you want apply which tag or attributes css using JQuery.
  5. When I write down this code to easily understand

    Code:

    <!DOCTYPE html>   <html>     <head>       <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>     <script>       $(document).ready(function(){         $("#btn1").click(function(){           $("h1,p").toggleClass("blue");           $("div").toggleClass("important");         });       });       </script> <style>  .important {     font-weight: bold;     font-size: 40px;     color: chartreuse;  } .blue{     color: #000080;  } </style> </head>              <body>   <h1>This is example</h1>   <p>This is example</p>   <div>Some important message </div>   <button id="btn1">Add class </button> </body> </html> 
 
 
 
 
0
 
vote

Puede hacer esto usando las funciones AddClass y RemoVeclass en jQuery. Añadir la clase como esta:

  $("#button1").click(function(){    $(#the_div).addClass('myClass'); });   

entonces puedes eliminarlo así:

  $("#button2").click(function(){    $("#the_div").removeClass('myClass'); });   

Las propiedades de su CSS deben definirse en ".MYCLASS".

 

You can do this by using the addClass and removeClass functions in jquery. Add the class like this:

$("#button1").click(function(){    $(#the_div).addClass('myClass'); }); 

Then you can remove it like this:

$("#button2").click(function(){    $("#the_div").removeClass('myClass'); }); 

Your CSS properties should be defined in ".myClass".

 
 
     
     
0
 
vote

Si desea agregar nuevas clases o propiedades use agregar clase

http://api.jquery.com/addclass/

que agregará las propiedades a los elementos dom.

Si desea sobrescribir las propiedades existentes, use JQUERY .CSS, en su actualización de caso

http://api.jquery.com/css/

.css agregará como un estilo en línea, por lo que todas las propiedades de su clase se sobrescribirán

 

If you want to add new class or properties use add class

http://api.jquery.com/addClass/

which will add the properties to the DOM elements.

If you want to overwrite the existing properties use jquery .css , in your case Update

http://api.jquery.com/css/

.css will add as an inline style , so all your class properties will be overwritten

 
 

Relacionados problema

76  Cómo romper la palabra después de un carácter especial como guiones (-)  ( How to break word after special character like hyphens ) 
Dado un CSS relativamente simple: div { width: 150px; } <div> 12333-2333-233-23339392-332332323 </div> ¿Cómo lo hago para que la cade...

142  ¿Cómo detectar cuál de las fuentes definidas se utilizó en una página web?  ( How to detect which one of the defined font was used in a web page ) 
Supongamos que tengo la siguiente regla de CSS en mi página: body { font-family: Calibri, Trebuchet MS, Helvetica, sans-serif; } ¿Cómo podría detec...

0  Deshacerse del disco en el artículo de la lista  ( Getting rid of disc in list item ) 
Estoy desarrollando un sitio usando jquery, y jquery ui Tabs. Por alguna razón, mis pestañas (lista desordenada) están mostrando sus balas en todos los navega...

5  Cómo alinear verticalmente una tabla en CSS  ( How to vertically align a table in css ) 
¿Cómo puedo alinear verticalmente una tabla en el centro de la pantalla con CSS? ...

8  Desapareciendo bordes de células de mesa CSS en navegadores basados ​​en gecko  ( Disappearing css table cell borders in gecko based browsers ) 
Tengo una construcción de tabla HTML muy específica que parece revelar un error de gecko. Aquí hay una versión destilada del problema. Observe la siguiente ...

0  Imagen de fondo Blurs en Firefox3  ( Background image blurs in firefox3 ) 
Cuando uso la imagen en mi página HTML usando la propiedad de fondo. Los loks están bien en IE, pero se ve borroso en Firefox. Wat podría ser la posible soluc...

303  ¿Por qué el ancho se colapsó en el elemento secundario del ancho porcentual en un padre absolutamente posicionado en Internet Explorer 7?  ( Why did the width collapse in the percentage width child element in an absolutel ) 
Tengo un double8 que contiene varios niños, uno de los cuales es un 99887776669 relativamente posicionado. Cuando uso un Form0 en el niño Form111111 , ...

0  LazyWeb: necesita Javascript que elimina los elementos de LI basados ​​en la clase visitada de un elemento  ( Lazyweb need javascript that removes li elements based on visited class of a el ) 
Tengo esta página que tiene muchos datos que no necesito, ya que ya he hecho clic en él, pero se repite a menudo, así que tengo que buscar visualmente el azul...

4  Cuerda continua que no se envuelve en TD  ( Continuous string not getting wrapped in td ) 
Cuando coloco una larga cadena continua en mi ancho fijo TD, no se está envuelto. La cadena aumenta el ancho de mi mesa. ¿Alguien puede ayudarme con esto? P...

1  Directrices para diseñar HTML para una fácil personalización CSS  ( Guidelines for designing html for easy css customization ) 
Estoy haciendo un proyecto SAAS, y queremos que cada cliente pueda cargar una página CSS para "su" sitio web. (Aunque en realidad, todos los sitios del client...




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