Also versuche ich, einen Rahmen um Schaltflächen auf meiner Seite zu bekommen, wenn der Benutzer darauf klickt.
Um den Handler einzurichten, gehe ich:
$(".reportButtons").click(function(){ //change border color });
Ich habe 2 Möglichkeiten ausprobiert, um die Rahmenfarbe der Schaltflächen dort zu ändern. Die erste Möglichkeit ist die Verwendung der .css()-Funktion.
$(this).css({"border-color": "#C1E0FF",
"border-weight":"1px",
"border-style":"solid"});
Aber wenn ich es auf diese Weise mache, ist der Rand wirklich fett (ich möchte, dass es ein Haaransatz ist, wie es normalerweise wäre, wenn ich die Breite auf 1 Pixel setze)
Die andere Möglichkeit, die ich versucht habe, besteht darin, das jquery-color-Plugin herunterzuladen und so etwas zu tun:
$(this).animate({borderTopColor: "#000000"}, "fast");
Wenn ich das mache, passiert nichts. Es gibt keinen Fehler – es passiert einfach nichts. Aber wenn ich, anstatt zu versuchen, die Rahmenfarbe zu ändern, versuche, die Hintergrundfarbe zu ändern, funktioniert es gut …. verwende ich also die jquery-Farbe falsch? Als Referenz, hier ist, wie ich den Hintergrund ändern würde:
$(this).animate({ backgroundColor: "#f6f6f6" }, 'fast');
wie gesagt, das geht. Als ich jquery-color heruntergeladen habe, habe ich nur die eine Datei (jquery-color.js) heruntergeladen, falls das einen Unterschied macht ….
Wie bekomme ich also einen Haarrand? (Ich würde es vorziehen, die Methode animate () zu verwenden, wenn Sie irgendwelche Ideen haben, wie das funktioniert.)
Aktuelles Beispiel:
Sie müssen definieren border-width:1px
Ihr Code sollte lauten:
$(this).css({"border-color": "#C1E0FF",
"border-width":"1px",
"border-style":"solid"});
Vorgeschlagenes Beispiel:
Sie sollten idealerweise eine Klasse und addClass/removeClass verwenden
$(this).addClass('borderClass');
$(this).removeClass('borderClass');
und in deinem CSS:
.borderClass{
border-color: #C1E0FF;
border-width:1px;
border-style: solid;
/** OR USE INLINE
border: 1px solid #C1E0FF;
**/
}
jsfiddle Arbeitsbeispiel: http://jsfiddle.net/gorelative/tVbvF/\
jsfiddle mit animieren: http://jsfiddle.net/gorelative/j9Xxa/
Dies ist nur ein Beispiel dafür, wie es funktionieren könnte, Sie sollten sich ein Bild davon machen. Es gibt wahrscheinlich bessere Möglichkeiten, dies zu tun, z. B. mit a toggle()
Ich würde empfehlen, eine Klasse zu verwenden, anstatt CSS-Eigenschaften festzulegen. Also statt dessen:
$(this).css({"border-color": "#C1E0FF",
"border-width":"1px",
"border-style":"solid"});
Definieren Sie eine CSS-Klasse:
.border
{
border-color: #C1E0FF;
border-width:1px;
border-style:solid;
}
Und dann ändern Sie Ihr Javascript in:
$(this).addClass("border");
Vielleicht nur “border-width” statt “border-weight”? Es gibt kein “border-weight” und diese Eigenschaft wird einfach ignoriert und stattdessen die Standardbreite verwendet.
Nachdem ich einige vergebliche Stunden mit der Meldung „SyntaxError: missing : after property id“ gekämpft habe, kann ich dieses Thema jetzt erweitern:
border-width ist eine gültige CSS-Eigenschaft, aber nicht in der jQuery-CSS-Objektdefinition enthalten, sodass .css({border-width: ‘2px’}) einen Fehler verursacht, aber mit .css({‘border -width’: ‘2px’}), vermutlich werden Eigenschaftsnamen in Anführungszeichen einfach so weitergegeben, wie sie empfangen wurden.
Meinten Sie
border-width
?– Kanon
19. Juni 2012 um 17:31 Uhr
Ich würde empfehlen, eine Klasse zu verwenden, anstatt CSS-Eigenschaften festzulegen.
– rummeln
19. Juni 2012 um 17:32 Uhr
@jrummel könntest du bitte genauer sein?
– Kröten
19. Juni 2012 um 17:35 Uhr