jQuery - .css("borderWidth")

rilight · 08.11.12

Hallo liebes Forum,

ich bin beim Arbeiten auf etwas gestoßen, das ich nicht verstehe.
Die jQuey Bibliothek bietet die methode .css() an, um auf css Eigenschaften zuzugreifen, bzw. diese zu manipulieren.

Ich brauche für ein Skript die Eigenschaft "border-width".
Daher 1. Versuch

Code:

<!DOCTYPE html>
<html>

<head>
    <title>jquery-borderWidth</title>

    <meta charset="ISO-8859-1">

    <style type="text/css">

    #test
    {
        position: absolute;
        width   : 560px;
        height  : 360px;
        padding : 10px;
        border-width: 10px;
        border-style: solid;
        border-color: #000000;
        left    : 50%;
        top     : 50%;
        margin  : -200px 0px 0px -300px;
    }

    </style>

</head>

<body>

    <div id="test">
        <p>Das ist ein Text</p>
    </div>

    <script language="javascript" type="text/javascript" src="./jquery-1.8.2.min.js"></script>
    <script language="javascript" type="text/javascript">

    var border = $("#test").css("border-width");
    console.log("border-width: "+border);
    alert(border);

    </script>

</body>
</html>

Nichts funktioniert ...
Google angeworfen und gesucht ... Antwort gefunden: jQuery kann mit dem "-" nichts anfangen.

http://stackoverflow.com/questions/3787502/how-to-get-border-width-in-jquery-javascript
Beispiel bei JSFiddle

Okey ... also 2.Versuch

Code:

<!DOCTYPE html>
<html>

<head>
    <title>jquery-borderWidth</title>

    <meta charset="ISO-8859-1">

    <style type="text/css">

    #test
    {
        position: absolute;
        width   : 560px;
        height  : 360px;
        padding : 10px;
        border-width: 10px;
        border-style: solid;
        border-color: #000000;
        left    : 50%;
        top     : 50%;
        margin  : -200px 0px 0px -300px;
    }

    </style>

</head>

<body>

    <div id="test">
        <p>Das ist ein Text</p>
    </div>

    <script language="javascript" type="text/javascript" src="./jquery-1.8.2.min.js"></script>
    <script language="javascript" type="text/javascript">

    var border = $("#test").css("borderWidth");
    console.log("border-width: " + border);
    alert(border);

    </script>

</body>
</html>

Funktioniert immer noch nicht ...
Der einzige Unterschied ist, dass im Beispiel die CSS-Anweisungen "inline" sind und bei mir "embedded".
Scheinbar kann jQuery damit nichts anfangen.

Habt Ihr da eine Idee, wieso es nicht geht?
Ich versteh es leider nicht.

torben1 · 08.11.12

Hej,

was Funktioniert nicht? Was sagt die Javascriptausgabe? Das Alert kommt sofort mit der Nachricht 10px.

Torben

rilight · 08.11.12

bei mir kommt nix ... also leeres Fenster

torben1 · 08.11.12

Wie rufst Du die Datei auf (Server, als Datei, Lokal ect.). Womit? Hast Du noch mehr im Quelltext stehen? Ist das Jquery richtig eingebunden? Ein wenig mehr muss da schon kommen. Denn der Quelltext von Dir geht.

rilight · 08.11.12

Datei liegt in xampp->htdocs.

Aufgerufen wird die Datei über "http://localhost/test/borderwidth.html".

Quelltext ist 1:1 kopiert.

Ja, jQuery ist richtig eingebunden. Auch ein Test, mit "http://code.jquery.com/jquery-1.8.2.min.js" im src bringt nichts.
Ich hab den Code nochmal modifiziert, so dass er out-of-the-box gehen müsste. Funktioniert weder im FF, Safari noch IE.

Code:

<!DOCTYPE html>
<html>

<head>
    <title>jquery-borderWidth</title>

    <meta charset="ISO-8859-1">

    <style type="text/css">

    #test
    {
        position: absolute;
        width   : 560px;
        height  : 360px;
        padding : 10px;
        border-width: 10px;
        border-style: solid;
        border-color: #000000;
        left    : 50%;
        top     : 50%;
        margin  : -200px 0px 0px -300px;
    }

    </style>

</head>

<body>

    <div id="test">
        <p>Das ist ein Text</p>
    </div>

    <script language="javascript" type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
    <script language="javascript" type="text/javascript">

    $("document").ready(function() {
        console.log($("#test"));
        var border = $("#test").css("borderWidth");
        var border_left = $("#test").css("borderLeftWidth");
        console.log("border-width: " + border);
        console.log("border-left-width: " + border_left);
        alert(border + " - " + border_left);
    });

    </script>

</body>
</html>

Sry torben1, aber ich weiß nicht was du gemacht hast, dass er geht?!
Im Fenster, das von alert geöffnet wird, steht nur der Wert für border-left-width - der andere fehlt.

Dj-Darkside · 08.11.12

Normalerweise müsste es mit

$("#test").css({ "border-width" : "xxpx" }); (statisch) und
$("#test").css({ "border-width" : new_border }); (dynamisch)

gehen.
Bei der jQuery .css() funktion kann man sowohl die CSS Eigenschaften als auch die DOM Eingenschaften benutzen.

torben1 · 09.11.12

Wenn ich Deinen neuen Quelltext 1 zu 1 übernehme bekomme ich folgenden Dinge angezeigt.
Eine weiße Seite mit einem Div (Schwarzer Rand und Text "Das ist ein Text"). Zusätzlich pop ein Alert auf mit "10px - 10px" (Safari + Chrome). In der Konsole steht dann folgendes:

[<div>, context: #document, selector: "#test"]

0: <div>

context: #document

length: 1

selector: "#test"

__proto__: Object[0]

test.php:41
border-width: 10px test.php:44
border-left-width: 10px

Was erwartest Du mehr? Was zeigt bei Dir die Javascriptkonsole?

rilight · 09.11.12

Bei mir zeigt das Popup unter Firefox "-10px" an.

Chrome und Safari hab ich jetzt nochmal getestet, dort wird korrekt "10px-10px" dargestellt.

---

Ein weiterer Test unter Win 7

- Firefox: "- 10px"
- IE: ^^ nichts ausgeführt
- Safari: "- 10px"
- Chrome: "10px-10px"

Vielen Dank für eure Hilfe, dann muss ich wohl damit leben, dass FF diese Eigenschaft nicht versteht oder richtig umsetzen kann! Danke nochmal an alle die Beigetragen haben!

Dj-Darkside · 09.11.12

Lese doch mal meinen Beitrag und Schau dir deinen Code nochmal an...

Suche

Suche

jQuery - .css("borderWidth")

rilight

Alkmene

torben1

Celler Dickstiel

rilight

Alkmene

torben1

Celler Dickstiel

rilight

Alkmene

Dj-Darkside

Hildesheimer Goldrenette

torben1

Celler Dickstiel

rilight

Alkmene

Dj-Darkside

Hildesheimer Goldrenette

Wir schützen Ihre Privatsphäre

Informationen auf einem Gerät speichern und/oder abrufen

Personalisierte Anzeigen und Inhalte, Anzeigen- und Inhaltsmessungen, Erkenntnisse über Zielgruppen und Produktentwicklungen (Optionale Cookies)

Datenübermittlung an Partner in anderen Staaten (Drittanbieter-Cookies)