How to Add Dotted Underlining Using JavaScript

Question

I have a HTML file that has a modified style so that the underline tag results in a dotted line.

<style type="text/css">
  u {    
     border-bottom: 1px dashed #999;
     text-decoration: none;
  }
</style>

I want a function that will find elements by class and apply this underline style. It needs to be in a JS function because the underlining only occurs during certain events (mouseover and onclick). What would my javascript code look like?

So far I have:

    function underline(id){
    var elements = document.getElementsByClassName(id);
    for(var i=0; i<elements.length; i++){
        elements[i].style.?????}
    }

score 4 · Accepted Answer · edited Jan 29 '14 at 22:27

4

You can use this:

element.style.borderBottom = '2px dotted black';

See example

If you want to have the width of the "underline" match the width of the text, you can add this:

element.style.display = 'inline';

edited Jan 29 '14 at 22:27

animuson

53,861
28
137
147

answered Mar 06 '13 at 20:16

Braden Best

8,830
3
31
43

So I wouldn't even need a style change in my header with this? – parap Mar 06 '13 at 20:18
@jcoat No you would not. The javascript method for making an "underline" would be to use `element.style.borderBottom`, this creates a border on the bottom, achieving the effect you wanted. You can additionally set `element.style.display` to `"inline"` and have the width of the underline match the element's text. I've also updated the example to show it works with multiple elements :) – Braden Best Mar 06 '13 at 20:21

score 1 · Answer 2 · answered Mar 06 '13 at 20:16

1

Why does it need to be done via javascript? You can just use the css class selector:

.myClass
{
  border-bottom: 1px dashed #999;
  text-decoration: none;
}

answered Mar 06 '13 at 20:16

basher

2,381
1
23
34

I only want the class underlined on certain events – parap Mar 06 '13 at 20:19
1

@jcoat You can add the class to your particular elements during those events. It's still better to separate the styling from JavaScript and keep it in the CSS file. – Amy Mar 06 '13 at 20:21
As @sweetamylase said, just [add/remove](http://stackoverflow.com/questions/195951/change-an-elements-css-class-with-javascript) the classes during the event. – basher Mar 06 '13 at 20:32

score 1 · Answer 3 · answered Mar 06 '13 at 20:18

Fyi, the <u> tag is non-semantic. Also, your css selector would be more useful if you use class for applying the styles:

.underline{
    border-bottom: 1px dashed #999;
    text-decoration: none;
}

So your html could be:

<p>Blah blah <span class="underline">underline this</span> blah blah.</p>

How to Add Dotted Underlining Using JavaScript

3 Answers3