How do I get border-width of element with jquery?

Question

My CSS class:
.oriz_menu{ font-size : 18px; border-top : 3px ridge darkred; border-bottom : 3px ridge darkred; border-right : 3px ridge darkred; }

Then when I try to get the border width it shows 0px:
console.log($("#menu").css("border-top-width"));

I have also tried .css("borderTopWidth"))
Please help!

PS: I append the #menu element into a parent then set the class with $("#menu").addClass("oriz_menu")

Answer 1

first create #menu and then addClass , Then append to parent div , like so

var menuDiv = "<div id='menu'></div>";
menuDiv = $(menuDiv).addClass("oriz_menu");

$("div#parent").append(menuDiv);

alert($("#menu").css("border-top-width"));

Check this DEMO

Answer 2

Here is a JSFiddle with the answer.

HTML

<div id="menu"></div>

Javascript

$("#menu").addClass("oriz_menu");

alert(
    $("#menu").css("border-top-width")
);

Answer 3

• in javascript

var menuDiv = "";

menuDiv = $(menuDiv).addClass("oriz_menu");

$("div#parent").append(menuDiv);

alert($("#menu").css("border-width"));

• in css

.oriz_menu{

font-size:18px;

border:3px ridge darkred;

}

Answer 4

Class name is not matching with CSS

In CSS you are adding styles to".Class"

But in jquery you are trying to add CSS for "#ID"

please change the class name to "menu".

Now you can see the difference, Hope it helped you.