How to Get the CSS Value of Elements
Since jQuery was developed to work well with CSS (Cascading Style Sheets), it is a good choice for getting the CSS value of an element on a Web page. JQuery is a JavaScript library that allows you to write scripts using its own set of functions and rules. You must first add the library to your Web page, and then you can begin using the ".css()" function to get the value of any CSS property set for any HTML element. These elements include page contents such as paragraphs, divs, tables and images.
Other People Are Reading
Instructions
-
-
1
Open the Web page in Notepad or a code editor and check the "<script>" tags for a reference to the jQuery library file. If you do not find the reference in either the head or footer of your Web page, add this code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript></script>
-
2
Add a pair of "<script>" tags below the jQuery library file:
<script type="text/javascript">
</script>
Write all of your jQuery script code between these two tags.
-
-
3
Scroll down and find the element from which you need to get the CSS value. Find the ID name in the tag:
<div id="mybox">
Content in here...
</div>
Add an ID name to the tag if it does not yet have one.
-
4
Go back to your "<script>" tags and write a "document ready" function to force the script to wait until the page finishes loading. On a new line inside that function's curly braces, select the HTML element by its ID name. and attach the ".css()" function. Declare a variable in front of the selector so the variable becomes equal to the result of "css()" function:
$(function () {
var width = $("#mybox").css();
});
-
5
Write the name of the CSS property that you need to get the value from inside the parantheses of the ".css()" function Put single or double quotes around the property name:
$(function () {
var width = $("#mybox").css("width");
});
-
1
