[RESOLVED]How do I get the border of a div with jquery

I can set the border of a div with jQuery using the following.

$(‘div[id$=div1]’).css(‘border’,
’1px
solid rgba(100,100,150,.5)’
);

but when I do:

alert(‘div[id$=div1]’).css(‘border’);

I get nothing.

How
can I get the border of a div with jquery?

Your code is having minute syntax mistakes. You just need to change your code from 

alert('div[id$=div1]').css('border');

to

alert($('div[id$=div1]').css("border"));

Complete Code

<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
  <meta charset="utf-8">
   <style type="text/css">
            
        </style>
        <script type="text/javascript">
            $( document ).ready(function() {
           $('div[id$=div1]').css('border', '1px solid rgba(100,100,150,.5)');
          });
          
          function getstyle()
          {
            alert($('div[id$=div1]').css("border"));
                      }
        </script>
</head>
<body>
<div id="div1">Test</div>
   <input type="button" value="Get Background Color" onclick="getstyle()" />
</body>
</html>

EDIT: Added a working sample demo 

SecondEdit : Link pasted for the demo was wrong,Corrected it

Hi JAYJHAWKER,

You can not use  code below,it will get nothing.

JAYHAWKER

alert(‘div[id$=div1]’).css(‘border’);

You need to try the exact css border  like below:

  alert($('div[id$=div1]').css('border-top-color'));

Not just for top , it is also applicable for "right", "left", and "bottom"

please try my code below:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="../Scripts/jquery-1.10.2.js"></script>
    <script type="text/javascript">
        $(function () {
            $('div[id$=div1]').css('border', '1px solid rgba(100,100,150,5)');
        })

        function alertStyle() {
            alert($('div[id$=div1]').css('border-top-color'));
            alert($('div[id$=div1]').css('border-right-width'));
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div id="div1">
        this is a test
    </div>
        <input type="button" onclick="alertStyle()" value="alert" />
    </form>
</body>
</html>

Best Regards,

Kevin Shen.

Leave a Reply