Making font strong to normal using jquery not working

Question

I have a div like the following:

<div id="div1" ><strong>some text</strong></div>

I want to make the font normal using jquery. I tried as follows:

$("#div1").css("font-weight", "normal !important");

But it is not working!!

score 4 · Answer 1 · answered Sep 23 '15 at 11:47

4

You need to select the <strong> not the div.

$("#div1 strong").css("font-weight", "normal");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div1"><strong>some text</strong>
</div>

answered Sep 23 '15 at 11:47

Paulie_D

107,962
13
142
161

This could solve the problem, but if you want to do it the correct way, you should remove the attribute. – Sep 23 '15 at 11:49
True but I'm addressing the problem supplied by the OP. Your comment should really be on the question...not this answer...but thanks. – Paulie_D Sep 23 '15 at 11:53
You indeed solved the problem. But if you want to do this using "proper code" you should remove the element instead. – Sep 23 '15 at 11:54
@Joost - I nearly agree ;-) I'd say if there's an element there (`` is used), there might be other reasons. But since an emphasis is not a "static" requirement of this element (hence "normalization" of the font weight) perhaps a different element type should be used (`` is an obvious choice here) – Amit Sep 23 '15 at 11:56
The `strong` or the HTML might unchangeable for whatever reason – Paulie_D Sep 23 '15 at 11:56
@Paulie_D - Maybe, but that's poor HTML then. Nowadays HTML should be representative of content, not appearance. – Amit Sep 23 '15 at 11:57
I gave you an +1 for solving. I agree, there might be a reason for this. – Sep 23 '15 at 11:58

score 0 · Answer 2 · edited May 23 '17 at 12:14

What your code does is set the font weight for the content of the <div>, and using !important can help override other css settings to the same element.

There are 2 problems though:

One problem is that the content (text...) is inside a nested element, and that has it's own style. You can either set the style of the nested element, or remove it altogether.

The other is that !important doesn't work inside $().css(). So you should try to get rid of it if you can (to avoid complex solutions).

Assuming you need an element to wrap the text (for whatever reason), I'd suggest replacing it with a more appropriate descriptive element (or rather, less descriptive in this case) and play with the style as needed:

$("#myText").css("font-weight", "normal");

#myText {
  font-weight: bold
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div1" ><span id="myText">some text</span></div>

Making font strong to normal using jquery not working

2 Answers2