Styling text in JavaScript and CSS with colored fonts and underlines

Question

Styling text in JavaScript and CSS with colored fonts and underlines

I am looking to customize the CSS for the font style.

<div id="a" onmouseover="chbg('red','b')" onmouseout="chbg('white','b')">This will change b element</div>
<div id="b">This is element b</div>

<div id="f" onmouseover="chbg('blue','g')" onmouseout="chbg('white','g')">This will change g element</div>
<div id="g">This is element g</div>

<div id="j" onmouseover="chbg('yellow','k')" onmouseout="chbg('white','k')">This will change k element</div>
<div id="k">This is element k</div>

From what I understand, this uses the 'chbg' function to modify background color.

If I want to add underline and change font color, how can I do this?

You can view a live example here: http://jsfiddle.net/NAuxn/

javascript html css

Answer 1

Answer №1

Make sure to include an additional parameter in your function call so that the style remains consistent when hovering out.

HTML

 <div id="a" onmouseover="chbg('red','b','underline','white')" onmouseout="chbg('white','b','none','black')">This will change b element</div>
 <div id="b">This is element b</div>

 <div id="f" onmouseover="chbg('blue','g','underline','white')" onmouseout="chbg('white','g','none','black')">This will change g element</div>
 <div id="g">This is element g</div>

 <div id="j" onmouseover="chbg('yellow','k','underline','white')" onmouseout="chbg('white','k','none','black')">This will change k element</div>
 <div id="k">This is element k</div>

JQUERY

function chbg(color, id, td, fc) { 
document.getElementById(id).style.backgroundColor = color;
document.getElementById(id).style.textDecoration = td;
document.getElementById(id).style.color = fc;
}

The code above uses four parameters like

chbg('red','b','underline','white')

. The third parameter indicates the text-decoration style and the fourth one specifies the color for mouse over.

When mousing out, the style is reverted back to normal. This approach effectively maintains consistency in styling. Consider creating a hover class and applying it on mouseover while removing it on mouseout for a more efficient solution.

DEMO

Answer 2

Make sure to include an additional parameter in your function call so that the style remains consistent when hovering out.

HTML

 <div id="a" onmouseover="chbg('red','b','underline','white')" onmouseout="chbg('white','b','none','black')">This will change b element</div>
 <div id="b">This is element b</div>

 <div id="f" onmouseover="chbg('blue','g','underline','white')" onmouseout="chbg('white','g','none','black')">This will change g element</div>
 <div id="g">This is element g</div>

 <div id="j" onmouseover="chbg('yellow','k','underline','white')" onmouseout="chbg('white','k','none','black')">This will change k element</div>
 <div id="k">This is element k</div>

JQUERY

function chbg(color, id, td, fc) { 
document.getElementById(id).style.backgroundColor = color;
document.getElementById(id).style.textDecoration = td;
document.getElementById(id).style.color = fc;
}

The code above uses four parameters like

chbg('red','b','underline','white')

. The third parameter indicates the text-decoration style and the fourth one specifies the color for mouse over.

When mousing out, the style is reverted back to normal. This approach effectively maintains consistency in styling. Consider creating a hover class and applying it on mouseover while removing it on mouseout for a more efficient solution.

DEMO

Answer 3

Answer №2

Utilize this function to customize the font color and apply an underline effect: http://jsfiddle.net/NAuxn/4/

function changeFontStyle(color, elementId) {     
  document.getElementById(elementId).style.color = color;
  document.getElementById(elementId).style.textDecoration = "underline";                        
}

Answer 4

Utilize this function to customize the font color and apply an underline effect: http://jsfiddle.net/NAuxn/4/

function changeFontStyle(color, elementId) {     
  document.getElementById(elementId).style.color = color;
  document.getElementById(elementId).style.textDecoration = "underline";                        
}

Styling text in JavaScript and CSS with colored fonts and underlines

Answer №1

Answer №2

Similar questions

Animation in CSS Appears Jumpy in Chrome

Executing a C# function from an HTML hyperlink

The Express.js server seems to be having trouble rendering a static JavaScript file

Implementing a sibling combinator technique within Material UI's useStyles framework

Answer processing for the reminder dialog is underway

Angular-ui-bootstrap-tabs feature smooth transitions when switching between tabs, but lacks animation when moving

Having trouble connecting to Azure SQL server from my Node.js application

Adjust parent div size based on image size increase

Are there any security risks in transmitting a password over HTTPS using jsonp?

Can you provide guidance on utilizing OneNote JavaScript APIs to interpret indented paragraphs within OneNote?

Transfer the content from a specific div into another div

How to create a stylish border line to separate rows using CSS

Vue.js encountered an error: Unexpected TypeError in promise. The function $set is not recognized

Unable to reach the dropdown menu in CSS

What is the process for updating information in Vue.js?

Leveraging Bootstrap grid system within AngularJS elements

Adding metadata fields to an existing Markdown file within TinaCMS

Leveraging traditional code methods within AngularJs

CSS: A guide to creating layouts

My regular expression isn't functioning properly. Can someone please assist me in troubleshooting and resolving this issue?