CODEWITHSUNDEEP
javascripthtmlcss
DJB
DJB

Reputation: 31

How do I check if a letter is bold?

I'm trying to change all bold characters to italic ones and vica versa. I figured out I need to iterate through the entire document.

So far I defined the two styles and a part of the function, not sure if the styles are needed.

        .bold {
            font-weight: bold;
        }
        .italic {
            font-style: italic;
        }

        <script>
        function swap() {
            if (fontWeight == 'bold') {
                fontWeight == 'normal';
                fontStyle == 'italic';
            }
            elseif (fontStyle == 'italic') {
                fontStyle == 'normal';
                fontWeight == 'bold';
            }
        </script>

Upvotes: 1

Views: 1728

Answers (6)

Redu
Redu

Reputation: 26191

You may simply collect all items with .bold and .italic classes under a node list with document.querySelectorAll(".bold, .italic") and toggle their classLists.

var sps = document.querySelectorAll(".bold, .italic"),
    mbt = document.getElementById("mbt");
mbt.addEventListener("click", _ => sps.forEach(function(sp){
                                                 sp.classList.toggle("bold");
                                                 sp.classList.toggle("italic");
                                               }));
.bold {
  font-weight: bold;
}

.italic {
  font-style: italic;
}
<p><span class="bold">Hello</span> <span class="italic">World</span></p>
<button id="mbt">Toggle</button>

Upvotes: 0

Thijs
Thijs

Reputation: 2351

If it is simply a matter of toggling the classes, you could do it like this. Each time you click the button it will change the bold text to italic and vice versa.

const
  trigger = document.getElementById('trigger');
  
function toggleClasses() {
  const
    // Get all the elements with the bold and/or italic class.
    elements = document.querySelectorAll('.bold, .italic');
  
  // Iterate over all the elements
  elements.forEach(element => {
    // For each element, toggle the bold and italic classes.
    element.classList.toggle('bold');
    element.classList.toggle('italic');
  });
}
  
trigger.addEventListener('click', toggleClasses);
.bold {
  font-weight: bold;
}
.italic {
  font-style: italic;
}
<p class="bold">initally bold</p>
<p class="bold">initally bold</p>
<p class="italic">initally italic</p>
<p class="bold">initally bold</p>
<p class="italic">initially italic</p>
<button id="trigger" type="button">toggle classes</button>

Upvotes: 0

jack
jack

Reputation: 1391

This is a generalize solution, using jQuery, not based only on class names. I do the bolded texts red so you can see it easily.

$('div').each(function () {
  if ($(this).css('font-weight') == 'bold') {
  	$(this).css('color', 'red'); // but you change to italic
    return;
  }
  if ($(this).css('font-style') == 'italic') {
  	$(this).css('color', 'green'); // but you change to bold
    return;
  }
  
});
.one, .three {font-weight: bold;}
.five {font-style: italic;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="one">aaa</div>
<div>ccc</div>
<div class="three">ddd</div>
<div>eee</div>
<div style="font-weight: bold;">lala</div>
<div style="font-style: italic;">tata</div>
<div>nana</div>
<div class="five">dada</div>

If you want to apply something to a text which is both bold and italic, remove the returns in the if blocks.

Upvotes: 0

Mahmoud
Mahmoud

Reputation: 936

it's not useful to add a JS script for something that can be done once and for all. so try to overwrite the default style of strong and em tags inyour CSS files by adding the following CSS code

strong, b{ font-weight: normal!important; font-style: italic!important;  }
em, i{font-style: normal!important; font-weight: bold!important; }

then replace all properties in your CSS files 

font-style: italic; by font-weight: bold;

and

font-weight: bold; by font-style: italic;

using your IDE

Upvotes: 0

Redair
Redair

Reputation: 204

You can also use getElementsByClassName to choose class and change style then:

   function swap() {
    var mass=document.getElementsByClassName("bold");
      for (i in mass){
        mass[i].style.fontWeight="normal";
      }
    }

Upvotes: 0

lumio
lumio

Reputation: 7585

Well, you could do this with querySelectorAll, considering only swapping .bold and .italic depending on their current class:

function swapCollection( collection, from, to ) {
  if ( !collection ) {
    return;
  }
  
  for( let i = 0; i < collection.length; ++i ) {
    const elm = collection[ i ];
    elm.classList.remove( from );
    elm.classList.add( to );
  }
}

function swap() {
  const allBold = document.querySelectorAll( '.bold' );
  const allItalic = document.querySelectorAll( '.italic' );
  
  swapCollection( allBold, 'bold', 'italic' );
  swapCollection( allItalic, 'italic', 'bold' );
}

document.getElementById( 'swap' ).addEventListener( 'click', swap );
.bold {
  font-weight: bold;
}

.italic {
  font-style: italic;
}
<div>
  <span class="bold">Hello</span> <span class="italic">world!</span>
</div>

<button id="swap">swap</button>

Upvotes: 1

Related Questions