web-dev-qa-db-fra.com

Définir une bordure fine à l'aide de .css () en javascript

J'essaie donc de créer une bordure autour des boutons de ma page lorsque l'utilisateur clique dessus.

Pour configurer le gestionnaire je vais: 

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

J'ai essayé 2 façons de changer la couleur de la bordure des boutons. La première consiste à utiliser la fonction .css ().

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

Mais quand je le fais de cette façon, la bordure est vraiment grosse (je veux que ce soit fin, comme ce serait normalement le cas si je règle la largeur à 1px)

L’autre méthode que j’ai essayée est de télécharger le plugin jquery-color et de faire quelque chose comme:

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

Quand je fais ça, rien ne se passe. Il n'y a pas d'erreur - rien ne se passe. Mais si au lieu d’essayer de changer la couleur de la bordure, j’essaie de changer la couleur de fond, cela fonctionne très bien ... alors j’utilise mal la couleur jQuery? Pour référence, voici comment je changerais l'arrière-plan:

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

comme je l'ai dit, ça marche. Lorsque j'ai téléchargé jquery-color, je n'ai téléchargé qu'un fichier (jquery-color.js), si cela fait une différence ....

Alors, comment puis-je obtenir une bordure délicate? (Je préférerais utiliser la méthode animate () si vous savez comment le faire fonctionner.)

javascriptjquerycolorsborder
25
Toadums

Exemple actuel:

Vous devez définir border-width:1px

Votre code devrait se lire comme suit:

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

Exemple suggéré:

Vous devriez idéalement utiliser une classe et addClass/removeClass

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

et dans votre CSS:

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

exemple de travail avec jsfiddle: http://jsfiddle.net/gorelative/tVbvF/ \

jsfiddle with animate: http://jsfiddle.net/gorelative/j9Xxa/ Ceci vous donne simplement un exemple de la façon dont cela pourrait fonctionner, vous devriez en avoir l'idée .. probable .. comme utiliser un toggle()

67
gorelative

Peut-être juste "border-width" au lieu de "border-weight"? Il n'y a pas de "poids de bordure" et cette propriété est simplement ignorée et la largeur par défaut est utilisée.

5
ioseb

Je recommanderais d'utiliser une classe au lieu de définir les propriétés css. Donc au lieu de cela:

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

Définir une classe css:

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

Et puis changez votre javascript pour:

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

Après quelques heures futiles à me battre avec un message 'SyntaxError: missing: after property id', je peux maintenant développer ce sujet:

border-width est une propriété css valide mais elle n'est pas incluse dans la définition de l'objet jQuery css, aussi .css ({border-width: '2px'}) provoquera une erreur,. {'border-width': '2px'}), vraisemblablement les noms de propriété entre guillemets sont simplement transmis tels qu'ils ont été reçus.

0
Robin Pinguey