CODEWITHSUNDEEP
javascriptjquerycsshtml
user3754676
user3754676

Reputation: 311

Removing Size and font-size from child elements

I want to remove some element attributes from the divs. My divs are generated automatically. I want to iterate through each div and child divs and want to remove all font-size (font-size: Xpx) and size which inside font tag <font size="X">.

These are the examples of my div.

<div id="headline" class="headline" style="position: word-break: break-all; background-color: rgb(90, 88, 84); width:300px;height:250px">
  <div style="text-align: center; font-size: 12px; color: rgb(1, 69, 18);">
    <div>
      <div>
        <font color="#ffffff" size="6" >
          <b>This is&nbsp;</b>
        </font>
        <b style="color: rgb(255, 255, 255); font-size: xx-large;">a Test&nbsp;</b>
      </div>
    </div>
    <div>
      <div>
        <b style="color: rgb(255, 255, 255); font-size: xx-large;">Demo&nbsp;</b>
      </div>
    </div>
    <div>
      <b style="color: rgb(255, 255, 255); font-size: xx-large;">csa</b>
    </div>
  </div>
</div>

OR

<div id="headline" class="headline" style="position: absolute; width: 186px; height: 50px; ">
  <div style="text-align: center; font-size: 12px; color: rgb(249, 249, 251);">
    <span style="color: rgb(255, 204, 153);">
      <font size="4">Expansion Pack</font>
    </span>
  </div>
</div>

I am reading the divs like.

$('#headline').find('*').each(function() {
    // font-size remove
    //size inside tag remove
});

But how can i remove the font-size and size if they are in the child element, sometimes only font-size are present and there is no <font> tag

Upvotes: 1

Views: 5137

Answers (2)

Bryan Downing
Bryan Downing

Reputation: 15472

I think you need to be more explicit with your selectors. Something like this should work:

// Select all elements with a style attribute that contains font-size, and
// remove the inline font-size property
$('[style*="font-size"]').css('font-size', '');

// Select all font elements with a size attribute, and
// remove the size attribute
$('font[size]').removeAttr('size');

You may want to make the selectors more specific to avoid modifying content unexpectedly. For example: 

$('#headline [style*="font-size"]').css('font-size', '');

NOTE: This solution uses jQuery attribute selectors.

EDIT: See the comments from Charlie about performance. Attribute selectors are much slower than most other selectors, but I'd bet that in most use cases the speed differences won't matter.

Upvotes: 4

nk147ch
nk147ch

Reputation: 21

try to loop those elements which got 'font-size':

$('div').each(function(){
    $(this).css('font-size', '');  // set the value as empty string
)};

$('b').each(function(){
    $(this).css('font-size', ''); 
)};

see jQuery Documentation on CSS.

Upvotes: -1

Related Questions