Question

我在'style'属性中有一个带内联CSS代码的元素。我在这个元素中添加了一个类，它在CSS样式表中使用!important覆盖了内联样式。

问题：即使CSS被样式表覆盖，我怎样才能获得内联CSS属性值？

当我使用$("div").css("background-size");时，它从样式表CSS中获取值，而不是被覆盖的内联CSS。

Answer 1

因为jQuery使用computedStyles来获取应用于元素的样式。我相信访问DOM元素可能是＆＃34;解决方案＆＃34;

＆＃13;

console.log(
  
  $('p').get(0).style.fontSize
  
);

＆＃13;

p {
   font-size:20px !important; 
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<p style="font-size:40px;">Hello World</p>

＆＃13;

您也可以扩展jQuery函数。

＆＃13;

jQuery.fn.cssInline = function(prop) {
    
    var e = $(this[0]).get(0); // get DOM element
    // convert to camelCase; this may not be required.
    var propCamelCase = prop.replace(/-([a-z])/g, function (g) {
          return g[1].toUpperCase(); 
        });
  
    return e.style[propCamelCase];
  
};

console.log( $('p').cssInline('font-size') );
console.log( $('p').cssInline('fontSize') );
console.log( $('p').cssInline('width') );

＆＃13;

p {
   font-size:20px !important; 
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<p style="font-size:40px;">Hello World</p>

＆＃13;

获取内联CSS属性值，即使它被覆盖

1 个答案: