jQuery - Get CSS information

Using the css property we can get the simple CSS property value of an attribute.

Other examples in Css (Jquery Tutorial)

Result from the Online TryIt-Editor

<!doctype html>
<html>
<head>
    <title>HtmlNest.com live html example</title>
 <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>

<script type="text/javascript">
$(document).ready(function(){
  $("#b1").click(function(){
    $("#asd").html("Background color is  " + $("#box").css("background-color"));
  });
  $("#b2").click(function(){
    $("#asd").html("Foreground color is  " + $("#box").css("color"));
  });
  $("#b3").click(function(){
    $("#asd").html("Height is  " + $("#box").css("height"));
  });
  $("#b4").click(function(){
    $("#asd").html("Width is  " + $("#box").css("width"));
  });
 
});
</script>
</head>
<body>
<div id="box" style="width:300px;height:200px;background:#ff0230;color:#0FC">Hello world! This box is styled by CSS</div>
<div id="asd"></div>

<p>
  <input type="submit" name="b1" id="b1" value="Get background color" />
  <input type="submit" name="b2" id="b2" value="Get foreground color" />
  <input type="submit" name="b3" id="b3" value="Get height" />
  <input type="submit" name="b4" id="b4" value="Get width" />
  <br />
</p>
</body>
</html>

chrome

^1.0

safari

^1.0

Firefox

^1.0

^4.0

opera

^4.0