Главная » Языки программирования

Learn Jquery Css Method

Содержание
  1. Changing css property in jquery
  2. Contents:
  3. .css( propertyName ) Returns: String
  4. version added: 1.0 .css( propertyName )
  5. version added: 1.9 .css( propertyNames )
  6. Examples:
  7. Demo:
  8. Demo:
  9. .css( propertyName, value ) Returns: jQuery
  10. version added: 1.0 .css( propertyName, value )
  11. version added: 1.4 .css( propertyName, function )
  12. version added: 1.0 .css( properties )
  13. Examples:
  14. How to change CSS Property using jQuery
  15. How to change CSS Property using jQuery
  16. Syntax of jQuery css() method
  17. Example 1 – To get css property of html element using jQuery css()
  18. Example 2 – To get all matched css property of html element using jQuery css()
  19. Example 3 – To set/change all css property of html element using jQuery css()
  20. jQuery - css() Method
  21. Return a CSS Property
  22. Example
  23. Set a CSS Property
  24. Example
  25. Set Multiple CSS Properties
  26. Example
  27. jQuery Exercises
  28. jQuery CSS Reference
  29. COLOR PICKER
  30. Report Error
  31. Thank You For Helping Us!

Changing css property in jquery

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.

Читайте также:  Php csv utf 8 with bom

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>

Demo:

Get the width, height, text color, and background color of a clicked div.

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>

Demo:

.css( propertyName, value ) Returns: jQuery

Description: Set one or more CSS properties for the set of matched elements.

version added: 1.0 .css( propertyName, value )

version added: 1.4 .css( propertyName, function )

A function returning the value to set. this is the current element. Receives the index position of the element in the set and the old value as arguments.

version added: 1.0 .css( properties )

As with the .prop() method, the .css() method makes setting properties of elements quick and easy. This method can take either a property name and value as separate parameters, or a single object of key-value pairs.

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": "#ffe", "border-left": "5px solid #ccc" >) and .css() . Notice that with the DOM notation, quotation marks around the property names are optional, but with CSS notation they're required due to the hyphen in the name.

When a number is passed as the value, jQuery will convert it to a string and add px to the end of that string. If the property requires units other than px , convert the value to a string and add the appropriate units before calling the method.

When using .css() as a setter, jQuery modifies the element's style property. For example, $( "#mydiv" ).css( "color", "green" ) is equivalent to document.getElementById( "mydiv" ).style.color = "green" . Setting the value of a style property to an empty string — e.g. $( "#mydiv" ).css( "color", "" ) — removes that property from an element if it has already been directly applied, whether in the HTML style attribute, through jQuery's .css() method, or through direct DOM manipulation of the style property. As a consequence, the element's style for that property will be restored to whatever value was applied. So, this method can be used to cancel any style modification you have previously performed. It does not, however, remove a style that has been applied with a CSS rule in a stylesheet or element. Warning: one notable exception is that, for IE 8 and below, removing a shorthand property such as border or background will remove that style entirely from the element, regardless of what is set in a stylesheet or element.

Note: .css() doesn't support !important declarations. So, the statement $( "p" ).css( "color", "red !important" ) does not turn the color of all paragraphs in the page to red as of jQuery 3.6.0. Do not depend on that not working, though, as a future version of jQuery may add support for such declarations. It's strongly advised to use classes instead; otherwise use a jQuery plugin.

As of jQuery 1.8, the .css() setter will automatically take care of prefixing the property name. For example, take .css( "user-select", "none" ) in Chrome/Safari will set it as -webkit-user-select , Firefox will use -moz-user-select , and IE10 will use -ms-user-select .

As of jQuery 1.6, .css() accepts relative values similar to .animate() . Relative values are a string starting with += or -= to increment or decrement the current value. For example, if an element's padding-left was 10px, .css( "padding-left", "+=15" ) would result in a total padding-left of 25px.

As of jQuery 1.4, .css() allows us to pass a function as the property value:

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

This example sets the widths of the matched elements to incrementally larger values.

Note: If nothing is returned in the setter function (ie. function( index, style )<> ) , or if undefined is returned, the current value is not changed. This is useful for selectively setting values only when certain criteria are met.

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

Examples:

Change the color of any paragraph to red on mouseover event.

Источник

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() Method

The css() method sets or returns one or more style properties for the selected elements.

Return a CSS Property

To return the value of a specified CSS property, use the following syntax:

The following example will return the background-color value of the FIRST matched element:

Example

Set a CSS Property

To set a specified CSS property, use the following syntax:

The following example will set the background-color value for ALL matched elements:

Example

Set Multiple CSS Properties

To set multiple CSS properties, use the following syntax:

The following example will set a background-color and a font-size for ALL matched elements:

Example

jQuery Exercises

jQuery CSS Reference

For a complete overview of all jQuery CSS methods, please go to our jQuery HTML/CSS Reference.

Unlock Full Access 50% off

COLOR PICKER

colorpicker

Join our Bootcamp!

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials
Top References
Top Examples
Get Certified

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Источник

Оцените статью
© 2024 Программирование