I Want to change the style of the text associated with a radio button using javascript

Question

0.00/5 (No votes)

See more:

As told in the question
i want to change the style or particularly color of the text associated with a fixed radio button
i know how to use label and i can change the text of a particular radio button using

document.getElementById('ques29').firstChild.nodeValue

for <input type="radio" name = "q30" value="D"><label id="ques29">(D) work function</label>

so can anyone guide me on how to change the color of the text

Posted 7-Sep-15 6:16am

Member 11965922

Add a Solution

Comments

Wombaticus 7-Sep-15 12:38pm

I would imagine you can just use
document.getElementById('ques29').className = 'cname';
where ques29 is the ID of the radio button, and cname is a style defined in your CSS, such as
.cname { font-weight: bold;}
No?

Member 11965922 7-Sep-15 12:43pm

Well its not Working

Wombaticus 7-Sep-15 12:56pm

Indeed... well, using
document.getElementById('ques29').className = 'cname';
should. (i.e. use the ID of teh label, not teh radio button.

Member 11965922 7-Sep-15 13:10pm

Thankx for ur Help
Its Workng

[no name] 7-Sep-15 13:04pm

Member 11965922 7-Sep-15 13:10pm

Thankx For ur Help
The problem is solved

[no name] 7-Sep-15 13:12pm

If it helps you please accept the answer as correct answer.

Member 11965922 7-Sep-15 13:35pm

how do i do that
i m new to the site and dont really know how

[no name] 7-Sep-15 13:43pm

Now you can accept as answer.

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Manas_Kumar · Accepted Answer · 2015-09-07T07:42:00

Solution 1

Step1: Add below style

CSS

<style>
.mystyle {
  background-color: coral;
  font-size: 25px;
  color: green;
}
</style>

Step2: Add below javascript code

JavaScript

<script>
var ele = document.getElementById('ques29');
ele.setAttribute('class', 'mystyle');
</script></script>

Note: Here 'ques29' ID of HTML Control radio button. You can implement the same any HTML control.

Posted 7-Sep-15 7:42am

Manas_Kumar

Comments

Sergey Alexandrovich Kryukov 7-Sep-15 13:56pm

5ed.
I credited you solution in Solution 2 where I added some options.
—SA

Sergey Alexandrovich Kryukov · Accepted Answer · 2015-09-07T08:01:00

In addition to Solution 1: such things are implemented very conveniently for the library users in jQuery:
http://api.jquery.com/category/css[^],
http://api.jquery.com/addClass[^],
http://api.jquery.com/removeClass/[^],
http://api.jquery.com/toggleClass/[^].

If you need to learn jQuery (highly recommended), please see:
http://en.wikipedia.org/wiki/JQuery,
http://jquery.com,
http://learn.jquery.com,
http://learn.jquery.com/using-jquery-core,
http://learn.jquery.com/about-jquery/how-jquery-works (start from here).

In case you want to change the size of the radio bottom itself, it graphics elements, you would need to simulate this input element using the images, via the img element, change its src attribute in JavaScript dynamically, in response to input events and so on. This was done by many authors many times, is also not so difficult.

—SA