jQuery css() Demo

Category: Style Properties

These methods get and set CSS-related properties of elements.

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.

.height()

Get the current computed height for the first element in the set of matched elements or set the height of every matched element.

.innerHeight()

Get the current computed inner height (including padding but not border) for the first element in the set of matched elements or set the inner height of every matched element.

.innerWidth()

Get the current computed inner width (including padding but not border) for the first element in the set of matched elements or set the inner width of every matched element.

jQuery.cssNumber

An object containing all CSS properties that may be used without a unit. The .css() method uses this object to see if it may append px to unitless values.

.offset()

Get the current coordinates of the first element, or set the coordinates of every element, in the set of matched elements, relative to the document.

.outerHeight()

Get the current computed outer height (including padding, border, and optionally margin) for the first element in the set of matched elements or set the outer height of every matched element.

.outerWidth()

Get the current computed outer width (including padding, border, and optionally margin) for the first element in the set of matched elements or set the outer width of every matched element.

.position()

Get the current coordinates of the first element in the set of matched elements, relative to the offset parent.

.scrollLeft()

Get the current horizontal position of the scroll bar for the first element in the set of matched elements or set the horizontal position of the scroll bar for every matched element.

.scrollTop()

Get the current vertical position of the scroll bar for the first element in the set of matched elements or set the vertical position of the scroll bar for every matched element.

.width()

Get the current computed width for the first element in the set of matched elements or set the width of every matched element.

• Ajax
  • Global Ajax Event Handlers
  • Helper Functions
  • Low-Level Interface
  • Shorthand Methods
  • Deprecated 1.3
  • Deprecated 1.7
  • Deprecated 1.8
  • Deprecated 1.9
  • Deprecated 1.10
  • Deprecated 3.0
  • Deprecated 3.2
  • Deprecated 3.3
  • Deprecated 3.4
  • Deprecated 3.5
  • Basics
  • Custom
  • Fading
  • Sliding
  • Browser Events
  • Document Loading
  • Event Handler Attachment
  • Event Object
  • Form Events
  • Keyboard Events
  • Mouse Events
  • Class Attribute
  • Copying
  • DOM Insertion, Around
  • DOM Insertion, Inside
  • DOM Insertion, Outside
  • DOM Removal
  • DOM Replacement
  • General Attributes
  • Style Properties
  • Collection Manipulation
  • Data Storage
  • DOM Element Methods
  • Setup Methods
  • Properties of jQuery Object Instances
  • Properties of the Global jQuery Object
  • Attribute
  • Basic
  • Basic Filter
  • Child Filter
  • Content Filter
  • Form
  • Hierarchy
  • jQuery Extensions
  • Visibility Filter
  • Filtering
  • Miscellaneous Traversing
  • Tree Traversal
  • Version 1.0
  • Version 1.0.4
  • Version 1.1
  • Version 1.1.2
  • Version 1.1.3
  • Version 1.1.4
  • Version 1.2
  • Version 1.2.3
  • Version 1.2.6
  • Version 1.3
  • Version 1.4
  • Version 1.4.1
  • Version 1.4.2
  • Version 1.4.3
  • Version 1.4.4
  • Version 1.5
  • Version 1.5.1
  • Version 1.6
  • Version 1.7
  • Version 1.8
  • Version 1.9
  • Version 1.11 & 2.1
  • Version 1.12 & 2.2
  • Version 3.0
  • Version 3.1
  • Version 3.2
  • Version 3.3
  • Version 3.4
  • Version 3.5
  • Version 3.6
  • Version 3.7

  Books

  Copyright 2023 OpenJS Foundation and jQuery contributors. All rights reserved. See jQuery License for more information. The OpenJS Foundation has registered trademarks and uses trademarks. For a list of trademarks of the OpenJS Foundation, please see our Trademark Policy and Trademark List. Trademarks and logos not indicated on the list of OpenJS Foundation trademarks are trademarks™ or registered® trademarks of their respective holders. Use of them does not imply any affiliation with or endorsement by them. OpenJS Foundation Terms of Use, Privacy, and Cookie Policies also apply. Web hosting by Digital Ocean | CDN by StackPath

  Источник

  CSS, Styling, & Dimensions

  jQuery includes a handy way to get and set CSS properties of elements:

  // Getting CSS properties.
   
  $( "h1" ).css( "fontSize" ); // Returns a string such as "19px".
   
  $( "h1" ).css( "font-size" ); // Also works.

  // Setting CSS properties.
   
  $( "h1" ).css( "fontSize", "100px" ); // Setting an individual property.
   
  // Setting multiple properties.
  $( "h1" ).css(
   fontSize: "100px",
   color: "red"
  >);

  Note the style of the argument on the second line – it is an object that contains multiple properties. This is a common way to pass multiple arguments to a function, and many jQuery setter methods accept objects to set multiple values at once.

  CSS properties that normally include a hyphen need to be camelCased in JavaScript. For example, the CSS property font-size is expressed as fontSize when used as a property name in JavaScript. However, this does not apply when passing the name of a CSS property to the .css() method as a string – in that case, either the camelCased or hyphenated form will work.

  It's not recommended to use .css() as a setter in production-ready code, but when passing in an object to set CSS, CSS properties will be camelCased instead of using a hyphen.

  link Using CSS Classes for Styling

  As a getter, the .css() method is valuable. However, it should generally be avoided as a setter in production-ready code, because it's generally best to keep presentational information out of JavaScript code. Instead, write CSS rules for classes that describe the various visual states, and then change the class on the element.

  // Working with classes.
   
  var h1 = $( "h1" );
   
  h1.addClass( "big" );
  h1.removeClass( "big" );
  h1.toggleClass( "big" );
   
  if ( h1.hasClass( "big" ) ) 
   . 
  >

  Classes can also be useful for storing state information about an element, such as indicating that an element is selected.

  link Dimensions

  jQuery offers a variety of methods for obtaining and modifying dimension and position information about an element.

  The code below shows a brief overview of the dimensions functionality in jQuery. For complete details about jQuery dimension methods, visit the dimensions documentation on api.jquery.com.

  Источник

  Using jQuery attr() to set “css”

  I am reading the book "jQuery Pocket Reference", O’Reilly, 2011. On page 15 it says: 'For example, calling attr("css", ) is the same as calling css().' But I cannot make the attr(“css”, < >) work. My test code: http://jsfiddle.net/4UMN3/4/

  7 Answers 7

  $("#spanText").attr('style', 'background-color:gray'); 

  Probably, it was meant to be

  $("#spanText").attr('style', 'background-color:gray'); 

  This may work, but has some problems:

  • It is preferred to change style property instead of style attribute.
  • It will replace all previously set inline styles.

  Then, if you use jQuery, better use css method:

  $("#spanText").css('background-color', 'gray'); 

  But style property is useful in vanilla-js:

  document.getElementById("spanText").style.backgroundColor = 'gray'; 

  I think jQuery's .attr() can only affect attributes the element has. HTMLElements do not know an attribute called "css" (meaning ).

  So, the correct usage would be

  An example that actually works is

  $("#spanText").attr("style","background-color:gray;"); 

  $("#id").attr('style', 'color:red;cursor:pointer');

  => the .css method modifies the style attribute not the "css" .

  $().att('style' , 'backgroundColor : gray'); 

  => there is no such thing as css attribute in html

  you use jQuery so you have to use css and not attr, 'cause css add property but attr will replace all style if existe !

   .newClass < color:#fff; >.test2 < color:red; >.newclass  
  This is the tag and this will be our tag
   get Attribute 
  This is some bold text in a paragraph.
   set Attribute 
  This is some text in a paragraph.
   set Attribute 

  Related

  Hot Network Questions

  Subscribe to RSS

  To subscribe to this RSS feed, copy and paste this URL into your RSS reader.

  Site design / logo © 2023 Stack Exchange Inc; user contributions licensed under CC BY-SA . rev 2023.7.27.43548

  By clicking “Accept all cookies”, you agree Stack Exchange can store cookies on your device and disclose information in accordance with our Cookie Policy.

  Источник

  jQuery Get and Set CSS Properties

  In this tutorial you will learn how to get or set style properties using jQuery.

  jQuery css() Method

  The jQuery css() method is used to get the computed value of a CSS property or set one or more CSS properties for the selected elements.

  This method provides a quick way to apply the styles directly to the HTML elements (i.e. inline styles) that haven't been or can't easily be defined in a stylesheet.

  Get a CSS Property Value

  You can get the computed value of an element's CSS property by simply passing the property name as a parameter to the css() method. Here's the basic syntax:

  The following example will retrieve and display the computed value of the CSS background-color property of a element, when it is clicked.

  Example

       div    
  The computed background-color property value of the clicked DIV element is:
    

  Set a Single CSS Property and Value

  The css() method can take a property name and value as separate parameters for setting a single CSS property for the elements. The basic syntax can be given with:

  The following example will set the CSS background-color property of the elements, to the color value blue , when it is clicked.

  Example

       .box    

  Set Multiple CSS Properties and Values

  You can also set multiple CSS properties with the css() method. The basic syntax for setting the more than one property for the elements can be given with:

  The following example will set the background-color as well as the padding CSS property for the selected elements at the same time.

  Example

       p    
  This is a heading
   
  This a paragraph.
   
  This is another paragraph.
   
  This is none more paragraph.
   
  This is one last paragraph.
   Add CSS Styles  

  Источник