Establecer un borde fino de usar .css() en javascript

Así que estoy tratando de conseguir un borde alrededor de los botones en mi página cuando el usuario hace clic en ellos.

Para configurar el controlador voy:

$(".reportButtons").click(function(){ //change border color });

He probado de las 2 maneras para cambiar el color del borde de los botones de allí. La primera forma es utilizando el .css() de la función.

$(this).css({"border-color": "#C1E0FF", 
             "border-weight":"1px", 
             "border-style":"solid"});

Pero cuando lo hago de esta manera, la frontera es muy gordo (yo quiero que sea el nacimiento del cabello, como lo haría normalmente se si puedo configurar el ancho de 1px)

La otra forma que he intentado es por la descarga de jquery-color plugin, y hacer algo como:

$(this).animate({borderTopColor: "#000000"}, "fast");

Cuando lo hago, no pasa nada. No hay ningún error – simplemente no pasa nada. Pero si en lugar de tratar de cambiar el color del borde, trato de cambiar el color de fondo, funciona bien….así que estoy usando el jquery-color equivocado? Para referencia, aquí es cómo me gustaría cambiar el fondo:

$(this).animate({ backgroundColor: "#f6f6f6" }, 'fast');

como he dicho, eso funciona. Cuando he descargado jquery-color, solo he descargado el archivo (jquery-color.js), si eso hace una diferencia….

Así que ¿cómo puedo obtener un borde fino? (Yo prefiero usar el animate() método si tiene anyideas cómo conseguir que funcione)

  • did you mean border-width?
  • Me gustaría recomendar el uso de una clase en lugar de la configuración de propiedades de css.
  • ¿podría ser más específico por favor?
  • He añadido una respuesta.
InformationsquelleAutor Toadums | 2012-06-19

4 Kommentare

  1. 67

    Ejemplo Actual:

    Es necesario definir border-width:1px

    El código debe leer:

    $(this).css({"border-color": "#C1E0FF", 
                 "border-width":"1px", 
                 "border-style":"solid"});

    Sugirió Ejemplo:

    Lo ideal es utilizar una clase y addClass/removeClass

    $(this).addClass('borderClass');
    $(this).removeClass('borderClass');

    y en tu CSS:

    .borderClass{
      border-color: #C1E0FF;
      border-width:1px;
      border-style: solid;
      /** OR USE INLINE
      border: 1px solid #C1E0FF;
      **/
    }

    jsfiddle de trabajo ejemplo: http://jsfiddle.net/gorelative/tVbvF/\

    jsfiddle con animate: http://jsfiddle.net/gorelative/j9Xxa/
    Esto sólo le da un ejemplo de cómo se podría trabajar, debe tener la idea.. Hay mejores maneras de hacer esto lo más probable es que.. como el uso de una toggle()

    • Wow, que es REALMENTE atractiva. ¿Por qué en la TIERRA no puede venir cuando yo escriba «jquery cambiar el color del borde» o algo similar en google?!?!?!?!!
    • he añadido un jsfiddle así que usted puede ver en acción
    • oh, ya la tengo funcionando en mi código. Super fácil
    • he añadido animar jsfiddle si tienes curiosidad
    • +1, ya que yo siempre te olvides de esto, y siempre tienen que google sólo para llegar aquí de nuevo, y otra vez!!!
    • por qué dint utilizar simplemente $(this).css({"border": "1px solid #C1E0FF"}); en lugar de llamar a todos los atributos
    • la taquigrafía es considerada «mala praxis» en la práctica de hoy.

  2. 5

    Tal vez sólo «border-width» en lugar de «frontera de peso»? No hay ninguna frontera «peso» y esta propiedad es simplemente ignoradas y ancho predeterminado se utiliza en su lugar.

  3. 5

    Me gustaría recomendar el uso de una clase en lugar de la configuración de propiedades de css. Así que en lugar de este:

    $(this).css({"border-color": "#C1E0FF", 
                 "border-width":"1px", 
                 "border-style":"solid"});

    Definir una clase css:

    .border 
    { 
      border-color: #C1E0FF; 
      border-width:1px; 
      border-style:solid; 
    }

    Y, a continuación, cambiar su código de javascript para:

    $(this).addClass("border");
  4. 0

    Después de un par de inútiles horas luchando con un
    ‘SyntaxError: falta : después de propiedad id’ mensaje de que ahora puede ampliar sobre este tema:

    border-width es válido propiedad css pero no está incluido en el css jQuery oject definición, entonces .css({border-width: ‘2px’}), se producirá un error,
    pero es muy feliz con .css({‘border-width’: ‘2px’}), se presume que la propiedad de los nombres entre comillas se acaba de pasar en como se recibió.

Kommentieren Sie den Artikel

Bitte geben Sie Ihren Kommentar ein!
Bitte geben Sie hier Ihren Namen ein

Pruebas en línea