如何使用 jQuery 获取点击分区的样式？

在本文中，我们将学习如何使用 jQuery 获取被点击的分区的样式(宽度、高度、文本颜色和背景颜色)。

方法： css() 方法用于在 jQuery 中获取所选元素的 CSS 属性值。我们在 jQuery 中使用 css()方法，该方法接受一组属性名称并返回一组该属性的值。我们存储这个数组并使用它来显示所有点击的 div 的 CSS。

句法：

var styles = $(this).css([
    "width",
    "height",
    "color",
    "background-color",
]);

示例：以下代码演示了上述方法。请参阅输出以获得更好的理解。单击一个div 时，它会显示宽度、高度、颜色和背景颜色属性及其各自的值。

HTML

  

    
    
  
    
        div {
            height: 50px;
            margin: 5px;
            padding: 5px;
        }
  
        #htmlDivID {
            width: 300px;
            color: yellow;
            background-color: blue;
        }
  
        #cssDivID {
            width: 310px;
            color: green;
            background-color: grey;
        }
  
        #jQueryDivID {
            width: 320px;
            color: pink;
            background-color: blue;
        }
    

  

    
        GeeksforGeeks
    
  
    
        Click to see the div
        element's styles
    
  
    HTML
    CSS
    jQuery
    
  
    
  
    
        $("div").click(function () {
            var cssValues = [];
  
            var styles = $(this).css([
                "width",
                "height",
                "color",
                "background-color",
            ]);
            $.each(styles, function (prop, value) {
                cssValues.push("<b>" + prop 
                    + "</b>: " + value + ", ");
            });
  
            $("#displayID").show().html(cssValues);
        });
    

  

输出：

• 在点击 div 之前：

• 点击div后：