Legen Sie einen dünnen Rahmen mit .css() in Javascript fest

Lesezeit: 3 Minuten

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.)

  • 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

Benutzer-Avatar
NDBoost

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()

  • Wow, das ist WIRKLICH glatt. Warum um alles in der Welt kommt das nicht, wenn ich “jquery change border color” oder etwas ähnliches in Google eingebe?!?!?!?!!

    – Kröten

    19. Juni 2012 um 17:41 Uhr

  • Ich habe ein jsfiddle hinzugefügt, damit Sie es in Aktion sehen können

    – NDBoost

    19. Juni 2012 um 17:42 Uhr

  • Ich habe animiertes jsfiddle hinzugefügt, wenn Sie neugierig sind

    – NDBoost

    19. Juni 2012 um 17:46 Uhr

  • +1, da ich das immer vergesse und immer wieder googlen muss, um immer wieder hierher zu kommen !!!

    – Miguel Angelo

    13. März 2014 um 19:44 Uhr

  • @gorelative warum verwendest du nicht einfach $(this).css({"border": "1px solid #C1E0FF"}); anstatt alle Attribute aufzurufen

    – krishna

    10. April 2014 um 9:02 Uhr

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.

1179070cookie-checkLegen Sie einen dünnen Rahmen mit .css() in Javascript fest

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy