Trying to set font size of header tag via javascript

Question

I'm using a twitter feed control and I'm trying to adjust the font size of one of the elements using javascript.

Here's the html snippet in question:

 <div class="twtr-hd">
     <a class="twtr-profile-img-anchor" href="http://twitter.com/pikefindotcom" target="_blank"><img src="http://a0.twimg.com/profile_images/1266884773/stock-market-chart_normal.jpg" class="twtr-profile-img" alt="profile"></a>                     
    <h3>Pikefin</h3>    
        <h4><a href="http://twitter.com/pikefindotcom" target="_blank">pikefindotcom</a></h4> 
</div>

I'm trying to change the font size of this tag:

<h3>Pikefin</h3>

Here's the Firebug output that is showing the appropriate css:

#twtr-widget-1 .twtr-doc, #twtr-widget-1 .twtr-hd a, #twtr-widget-1 h3, #twtr-widget-1 h4, #twtr-widget-1 .twtr-popular {
    background-color: #333333 !important;
    color: #FFFFFF !important;
}
index.php #4 (line 1)
.twtr-widget h3 {
    font-size: 11px !important;
    font-weight: normal !important;
}
widget.css (line 12)
.twtr-widget-profile h3, .twtr-widget-profile h4 {
    margin: 0 0 0 40px !important;
}
widget.css (line 12)

I'm using jquery to retrieve the element (disclaimer: jquery noob) which seems to work fine but then I can't figure out the syntax to set the font size. Here's what I thought the code should be:

var element = $('.twtr-hdr h3');
element.style.fontSize="17px";

But that gives me this error message: "element.style is undefined"

So I'm unsure as to exactly what object type jquery is returning. Any assistance would be much appreciated.

EGL 2-101 · Accepted Answer · 2011-03-12 20:43:00Z

3

this should be,

$('.twtr-hdr h3').css("font-size", "17px");

answered Mar 12, 2011 at 20:43

EGL 2-101

1,2759 silver badges18 bronze badges

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

4 Comments

hunter Over a year ago

same as 2 other answers before yours

EGL 2-101 Over a year ago

that is because I have less then 125 reps. so I can't post another answer in 3 mins. :( Also this works!

hunter Over a year ago

well, someone seems to like it ;) +1

EGL 2-101 Over a year ago

@hunter, thanks, I hope I will earn 20 more reps so I can answer fast next time.

JCOC611 · Accepted Answer · 2011-03-12 20:40:43Z

0

You should use jQuery's .css:

$(".twtr-hdr h3").css({fontSize:"17px"});

Your code doesn't work because jQuery doesn't return the actual element, it returns an array...so:

element[0].style... //this should work too

answered Mar 12, 2011 at 20:40

JCOC611

19.8k15 gold badges72 silver badges90 bronze badges

Comments

ctekse · Accepted Answer · 2011-03-12 20:41:07Z

0

You should use:

var element = $('.twtr-hdr h3').get(0); // this way you'll get the javascript object
element.style.fontSize="17px";

or:

$('.twtr-hdr h3').attr("style", "font-size: 17px"); // jQuery style

answered Mar 12, 2011 at 20:41

ctekse

6511 gold badge6 silver badges18 bronze badges

Collectives™ on Stack Overflow

Trying to set font size of header tag via javascript

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related