jQuery: using .css on a cloned element to obtain a specific css property?

Question

I am trying to obtain the font-size currently applied to a cloned element, but when I use the jQuery .css function, it doesn't retrieve anything.

Is it not possible to use the ".css" function in jQuery to retrieve a specific css property from a cloned element?

The following does not work:

var clonedElement = jQuery('.element').clone();
clonedElement.attr("style", "");
var defaultFontSizeValue = clonedElement.css('font-size');
console.log(defaultFontSizeValue);

Edit 1 The original unfortunately has inline styles that don't allow me to get the overridden font-size property for that element that is applied via a class. This is why I am trying to retrieve that original value by removing the inline styles in the clone.

Can't you get the properties of the original, before cloning? — Scott
– Scott, Commented Aug 13, 2016 at 1:42
Unfortunately I cant do that as I am trying to get the overridden css property, since the original has inline-styles applied to it. — Dmitri
– Dmitri, Commented Aug 13, 2016 at 1:45

Dekel · Accepted Answer · 2016-08-13 01:49:03Z

2

Your problem is that the cloned element is not "attached" to your dom, and therefore there is no style definition to this element (based on css that are not inline).

What you can do is append the cloned element to the body (after setting display: hidden, if you want), and then check the font-size:

$(function() {
  console.log($('.c1').css('fontSize'));
  c1 = $('.c1').clone();
  console.log(c1.css('fontSize'));
  
  c1.css('display', 'none');
  $('body').append(c1)
  console.log(c1.css('fontSize'));
});

.c1 {
  font-size: 12px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="c1">asd</div>

answered Aug 13, 2016 at 1:49

Dekel

62.9k12 gold badges109 silver badges130 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

jQuery: using .css on a cloned element to obtain a specific css property?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related