Learn Jquery Css Method

How to change CSS Property using jQuery

To get and set/change css property using jQuery; In this tutorial, you will learn how to change CSS properties like background color, font size, styling, font color etc, of html elements using jQuery css() method.

How to change CSS Property using jQuery

Using the jQuery CSS () method is used to get or set the style/css properties ​​for the selected elements.

Syntax of jQuery css() method

This can use to get css property of element.

$(selector).css("propertyname","value");

This can use to set css property of element.

It can use to set multiple css properties of elements.

Example 1 – To get css property of html element using jQuery css()

It can use to get the value of a specified CSS property.

      
The background-color of this paragraph is red.
 
The background-color of this paragraph is green.
 
The background-color of this paragraph is blue.
   

Example 2 – To get all matched css property of html element using jQuery css()

This property is used to determine a specific value for all matching elements.

      
The background-color of this paragraph is red. 
The background-color of this paragraph is green. 
The background-color of this paragraph is blue. 
This paragraph has no background-color.
   

In the above example, you can see that, set the all matched property background color using css() method.

Example 3 – To set/change all css property of html element using jQuery css()

This method gives you the convenience of adding multiple property values ​​together.

      
The background-color of this paragraph is red.
 
The background-color of this paragraph is green.
 
The background-color of this paragraph is blue.
   

In the above example 3 , you can see that, set the all matched mutlitple property background color, font-size using css() method.

Источник

Jquery поменять стиль css

Get the value of a computed style property for the first element in the set of matched elements or set one or more CSS properties for every matched element.

Contents:

.css( propertyName ) Returns: String

Description: Get the computed style properties for the first element in the set of matched elements.

version added: 1.0 .css( propertyName )

version added: 1.9 .css( propertyNames )

The .css() method is a convenient way to get a computed style property from the first matched element, especially in light of the different ways browsers access most of those properties (the getComputedStyle() method in standards-based browsers versus the currentStyle and runtimeStyle properties in Internet Explorer prior to version 9) and the different terms browsers use for certain properties. For example, Internet Explorer’s DOM implementation refers to the float property as styleFloat , while W3C standards-compliant browsers refer to it as cssFloat . For consistency, you can simply use «float» , and jQuery will translate it to the correct value for each browser.

Also, jQuery can equally interpret the CSS and DOM formatting of multiple-word properties. For example, jQuery understands and returns the correct value for both .css( «background-color» ) and .css( «backgroundColor» ) . This means mixed case has a special meaning, .css( «WiDtH» ) won’t do the same as .css( «width» ) , for example.

Note that the computed style of an element may not be the same as the value specified for that element in a style sheet. For example, computed styles of dimensions are almost always pixels, but they can be specified as em, ex, px or % in a style sheet. Different browsers may return CSS color values that are logically but not textually equal, e.g., #FFF, #ffffff, and rgb(255,255,255).

Retrieval of shorthand CSS properties (e.g., margin , background , border ), although functional with some browsers, is not guaranteed. For example, if you want to retrieve the rendered border-width , use: $( elem ).css( «borderTopWidth» ) , $( elem ).css( «borderBottomWidth» ) , and so on.

An element should be connected to the DOM when calling .css() on it. If it isn’t, jQuery may throw an error.

As of jQuery 1.9, passing an array of style properties to .css() will result in an object of property-value pairs. For example, to retrieve all four rendered border-width values, you could use $( elem ).css([ «borderTopWidth», «borderRightWidth», «borderBottomWidth», «borderLeftWidth» ]) .

As of jQuery 3.2, CSS Custom Properties (also called CSS Variables) are supported: $( «p» ).css( «—custom-property» ) . Note that you need to provide the property name as-is, camelCasing it won’t work as it does for regular CSS properties.

Examples:

Get the background color of a clicked div.

html>
html lang="en">
head>
 meta charset="utf-8">
 title>css demo title>
 style> 
 div 
 width: 60px;
 height: 60px;
 margin: 5px;
 float: left;
 >
 style>
 script src="https://code.jquery.com/jquery-3.7.0.js"> script>
 head>
body>
 
span id="result">  span>
div style="background-color:blue;"> div>
div style="background-color:rgb(15,99,30);"> div>
div style="background-color:#123456;"> div>
div style="background-color:#f11;"> div>
 
script> 
$( "div" ).on( "click", function( ) 
 var color = $( this ).css( "background-color" );
 $( "#result" ).html( "That div is " + color + "." );
>);
 script>
 
 body>
 html>

html>
html lang="en">
head>
 meta charset="utf-8">
 title>css demo title>
 style> 
 div 
 height: 50px;
 margin: 5px;
 padding: 5px;
 float: left;
 >
 #box1 
 width: 50px;
 color: yellow;
 background-color: blue;
 >
 #box2 
 width: 80px;
 color: rgb(255, 255, 255);
 background-color: rgb(15, 99, 30);
 >
 #box3 
 width: 40px;
 color: #fcc;
 background-color: #123456;
 >
 #box4 
 width: 70px;
 background-color: #f11;
 >
 style>
 script src="https://code.jquery.com/jquery-3.7.0.js"> script>
 head>
body>
 
p id="result">  p>
div id="box1">1 div>
div id="box2">2 div>
div id="box3">3 div>
div id="box4">4 div>
 
script> 
$( "div" ).on( "click", function( ) 
 var html = [ "The clicked div has the following styles:" ];
 
 var styleProps = $( this ).css([
 "width", "height", "color", "background-color"
 ]);
 $.each( styleProps, function( prop, value ) 
 html.push( prop + ": " + value );
 >);
 
 $( "#result" ).html( html.join( "
" ) );
>);
 script>
 
 body>
 html>

$( "div.example" ).css( "width", function( index ) 
 return index * 50;
>);

console.log($('body').css('font-size'));

$('a').css('color', function(index, oldValue) < if(oldValue=='rgb(0, 0, 238)') else >);

var div = $('div').first(); var newWidth=div.width()+150; div.width(newWidth); var newHeight = div.height()+50; div.height(newHeight);