Establecer un borde delgado usando.css () en javascript

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

Para configurar el controlador voy a: 

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

He intentado 2 maneras de cambiar el color del borde de los botones allí. La primera forma es usar el .función css ().

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

Pero cuando lo hago de esta manera, el borde es realmente gordo (quiero que sea rayita, como lo sería normalmente si establezco el ancho en 1px)

La otra forma que he probado es descargando el jquery-color plugin, y haciendo algo como: 

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

Cuando hago eso, no pasa nada. No hay error, simplemente no pasa nada. Pero si en lugar de intentar cambiar el color del borde, trato de cambiar el color de fondo, funciona fine....so ¿estoy usando el jquery-color mal? Para referencia, aquí es cómo cambiaría el fondo: 

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

Como dije, eso funciona. Cuando descargué jquery-color, solo descargué un archivo (jquery-color.js), si eso hace una diferencia....

Entonces, ¿cómo puedo conseguir un borde rayado? (Preferiría usar el método animate() si tiene alguna idea de cómo hacer que funcione)

Author: Toadums, 2012-06-19
Source

4 answers

Ejemplo actual:

Necesitas definir border-width:1px

Su código debe decir: 

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

Ejemplo sugerido:

Lo ideal es usar 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 ejemplo de trabajo: http://jsfiddle.net/gorelative/tVbvF/\

Jsfiddle con animación: http://jsfiddle.net/gorelative/j9Xxa / Esto solo te da un ejemplo de cómo podría funcionar, debería hacerse una idea.. Hay mejores maneras de hacer esto muy probablemente.. como usar un toggle()

 67
Author: gorelative,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-06-19 17:41:42

Tal vez solo "border-width" en lugar de "border-weight"? No hay "border-weight" y esta propiedad solo se ignora y en su lugar se usa el ancho predeterminado.

 5
Author: ioseb,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-06-19 17:32:12

Recomiendo usar una clase en lugar de establecer propiedades css. Así que en lugar de esto:

$(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 luego cambia tu javascript a: 

$(this).addClass("border");
 4
Author: jrummell,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-06-19 17:38:48

Después de unas horas inútiles luchando con un Mensaje 'SyntaxError: missing: after property id' Ahora puedo ampliar este tema:

Border-width es una propiedad css válida, pero no está incluida en la definición de jQuery css.css ({border-width: '2px'}) causará un error, pero es bastante feliz con .css ({'border-width': '2px'}), presumiblemente los nombres de propiedades entre comillas solo se pasan como se reciben.

 0
Author: Robin Pinguey,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-02-21 15:36:23