jQuery - CSS Properties-alljchome-开发者的教程家园

jQuery Tutorial

jQuery DOM Manipulation

jQuery CSS Manipulation

jQuery Effects

jQuery Traversing

jQuery UI

jQuery References

jQuery - Utilities

jQuery Plugins

jQuery Useful Resources

Selected Reading

jQuery - CSS Properties

jQuery provides css() method to manipulate CSS properties of the matched elements.

JQuery css() method does not modify the content of the jQuery object but they are used to get and set CSS properties on DOM elements.

jQuery - Get CSS Properties

jQuery css() method can be used to get the value of a CSS property associated with the first matched HTML element. Following is the syntax of the css() method:

$(selector).css(propertyName);

jQuery understands and returns the correct value for both css( "background-color" ) and css( "backgroundColor" ).

Example

Let s try the following example and verify the result. This should return the background color of the first matched <span>.

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script>
<script>
   $(document).ready(function() {
      $("button").cpck(function(){
         alert("Background color = " + $("span").css("background-color"));
      });
   });
</script>
<style>
   button{margin:10px;width:150px;cursor:pointer}
   span{ margin:10px;padding:12px; width:125px;}
</style>
</head>
<body>
   <p>Cpck the below button to see the result:</p>

   <span style="background-color:#9c9cff;">Blue</span>
   <span style="background-color:#93ff93;">Green</span>

   <button>Get CSS Property</button>
</body>
</html>

jQuery - Set CSS Properties

jQuery css() method can be used to set the value of one or more CSS properties associated with the matched HTML element. Following is the syntax of the css() method:

$(selector).css(propertyName, value);

Here both the parameters are required, propertyName represents a CSS property name where as value represents a vapd value of the property.

Example

Let s try the following example and verify the result. Here we will take the color of the first matched <span> and will change the text color of all <p> using the span background-color.

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script>
<script>
   $(document).ready(function() {
      $("button").cpck(function(){
         var color = $("span").css("background-color");
         $("p").css("color", color);
      });
   });
</script>
<style>
   button{margin:10px;width:150px;cursor:pointer}
   span{ margin:10px;padding:12px; width:125px;}
</style>
</head>
<body>
   <p>Cpck the below button to see the result:</p>

   <span style="background-color:#9c9cff;">Blue</span>
   <span style="background-color:#93ff93;">Green</span>

   <button>Set CSS Property</button>
</body>
</html>

jQuery - Set Multiple CSS Properties

You can apply multiple CSS properties on the matched elements using a single jQuery method css(). You can apply as many properties as you pke in a single call.

Following is the syntax of the css() method to set multiple CSS properties:

$(selector).css({propertyName1:value1, propertyName2:value2,...});

Example

Let s try the following example and verify the result. Here we will set background color of all the <span> to "#fb7c7c;" and font-size to 25px.

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script>
<script>
   $(document).ready(function() {
      $("button").cpck(function(){
         $("span").css({"background-color":"#fb7c7c", "font-size": "25px"});
      });
   });
</script>
<style>
   button{margin:10px;width:150px;cursor:pointer}
   span{ margin:10px;padding:12px; width:125px;}
</style>
</head>
<body>
   <p>Cpck the below button to see the result:</p>

   <span style="background-color:#9c9cff;">Blue</span>
   <span style="background-color:#93ff93;">Green</span>

   <button>Set CSS Property</button>
</body>
</html>

jQuery HTML/CSS Reference

You can get a complete reference of all the jQuery Methods to manipulate CSS and HTML content at the following page: jQuery HTML/CSS Reference.

jQuery - CSS Properties

jQuery - Get CSS Properties

Example

jQuery - Set CSS Properties

Example

jQuery - Set Multiple CSS Properties

Example

jQuery HTML/CSS Reference

友情链接