📌  相关文章
📜  jQuery-CSS选择器方法

📅  最后修改于: 2020-10-23 08:16:08             🧑  作者: Mango

jQuery库几乎支持级联样式表（CSS）规范1至3中包含的所有选择器，这在World Wide Web Consortium的网站上已概述。

使用JQuery库，只要浏览器启用了JavaScript，开发人员就可以增强其网站，而不必担心浏览器及其版本。

大多数JQuery CSS方法不会修改jQuery对象的内容，而是用于将CSS属性应用于DOM元素。

应用CSS属性

使用JQuery方法css（PropertyName，PropertyValue）应用任何CSS属性非常简单。

这是方法的语法-

selector.css( PropertyName, PropertyValue );

在这里，您可以将PropertyName作为javascript字符串传递，并且基于其值， PropertyValue可以是字符串或整数。

例

以下是将字体颜色添加到第二个列表项的示例。

现场演示
The jQuery Example
      
        
      
   
    
   
      

         
    
            
  • list item 1
    • 
            
  • list item 2
    • 
            
  • list item 3
    • 
            
  • list item 4
    • 
            
  • list item 5
    • 
            
  • list item 6
    •

这将产生以下结果-

应用多个CSS属性

您可以使用单个JQuery方法CSS（{key1：val1，key2：val2 ….）来应用多个CSS属性。您可以在单个调用中应用任意多个属性。

这是方法的语法-

selector.css( {key1:val1, key2:val2....keyN:valN})

如上所述，您可以在此处将key作为属性传递，并将val作为其值传递。

例

以下是将字体颜色和背景色添加到第二个列表项的示例。

现场演示
The jQuery Example
      
        
      
   
    
   
      

         
    
            
  • list item 1
    • 
            
  • list item 2
    • 
            
  • list item 3
    • 
            
  • list item 4
    • 
            
  • list item 5
    • 
            
  • list item 6
    •

这将产生以下结果-

设置元素的宽度和高度

width（val）和height（val）方法可用于分别设置任何元素的宽度和高度。

例

以下是一个简单的示例，该示例设置了first分隔元素的宽度，其中其余元素的宽度由样式表设置

现场演示
The jQuery Example
      
        
      
        
      
   
    
   
      

      
d

      
d

      
d

      
d

这将产生以下结果-

jQuery CSS方法

下表列出了可用于播放CSS属性的所有方法-

Sr.No. Method & Description
1 css( name )

Return a style property on the first matched element.
2 css( name, value )

Set a single style property to a value on all matched elements.
3 css( properties )

Set a key/value object as style properties to all matched elements.
4 height( val )

Set the CSS height of every matched element.
5 height( )

Get the current computed, pixel, height of the first matched element.
6 innerHeight( )

Gets the inner height (excludes the border and includes the padding) for the first matched element.
7 innerWidth( )

Gets the inner width (excludes the border and includes the padding) for the first matched element.
8 offset( )

Get the current offset of the first matched element, in pixels, relative to the document.
9 offsetParent( )

Returns a jQuery collection with the positioned parent of the first matched element.
10 outerHeight( [margin] )

Gets the outer height (includes the border and padding by default) for the first matched element.
11 outerWidth( [margin] )

Get the outer width (includes the border and padding by default) for the first matched element.
12 position( )

Gets the top and left position of an element relative to its offset parent.
13 scrollLeft( val )

When a value is passed in, the scroll left offset is set to that value on all matched elements.
14 scrollLeft( )

Gets the scroll left offset of the first matched element.
15 scrollTop( val )

When a value is passed in, the scroll top offset is set to that value on all matched elements.
16 scrollTop( )

Gets the scroll top offset of the first matched element.
17 width( val )

Set the CSS width of every matched element.
18 width( )

Get the current computed, pixel, width of the first matched element.