CODEWITHSUNDEEP
javascripthtmlstylesgetelementbyid
user3725395
user3725395

Reputation: 185

javascript setting font-weight: want to set to bold or normal can't get it work

I can't seem to workout how to get to the font-weight: bold; setting, I want to change the setting to normal or bold on the fly. any ideas?

HTML

<li onclick="showStuff(this)" id="tabs1" style="margin: -5px 0px 0px 0px; padding: 0px 10px; border-width: 1px 1px 0px; border-top-style: solid; border-right-style: solid; border-left-style: solid; border-top-color: rgb(215, 215, 215); border-right-color: rgb(215, 215, 215); border-left-color: rgb(215, 215, 215); font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; font-weight: bold; font-stretch: inherit; line-height: 1.7em; vertical-align: baseline; list-style: none; position: relative; z-index: 99; display: inline-block; float: left; bottom: 0px; background: none 0px 0px repeat scroll rgb(250, 250, 250);"
class="design1"><a style="margin: 0px; padding: 6px 1px 6px 2px; border: 0px; font-family: Verdana, sans-serif; font-size: 12px; font-style: normal; font-variant: normal; font-weight: bold; font-stretch: normal; line-height: 18px; vertical-align: baseline; outline: 0px; color: rgb(0, 0, 0); text-decoration: none; display: inline-block; text-align: center; min-width: 140px;"
<span style="margin: 0px; padding: 0px; border: 0px; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; line-height: inherit; vertical-align: baseline;">
test1</span></a></li>

javascript.

<script type="text/javascript">
function showStuff(element)  {
        document.getElementById("tabs1").style.marginTop = "-5px"; // works fine.

        document.getElementById("tabs1").style.fontWeight = "normal"; // doesn't work, tried various settings.
}

Upvotes: 0

Views: 2944

Answers (2)

Henri Hietala
Henri Hietala

Reputation: 3041

Your html is messed up. There's an unclosed <a>-tag which has font-weight: bold; and it overrides font-weight: normal; on #tabs1.

Remove font-weight: bold; from <a> and it will work.

function showStuff(element)  {
  document.getElementById("tabs1").style.marginTop = "-5px"; // works fine.
  document.getElementById("tabs1").style.fontWeight = "normal"; // doesn't work, tried various settings.
}
<li id="tabs1" style="font-weight: bold;" class="design1">
  <a href="#" onclick="showStuff(this)">
    <span>
      test1
    </span>
  </a>
</li>

Upvotes: 0

Abhijeet
Abhijeet

Reputation: 41

Here is the example

<!DOCTYPE html>
<html>
<head>
<script     src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
    $("p:first").addClass("intro");
    });
});
</script>
<style>
.intro {
font-size: 150%;
color: red;
}
</style>
</head>
<body>

<h1>This is a heading</h1>

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

<button>Add a class name to the first p element</button>

</body>
</html>

Upvotes: 1

Related Questions