Using jQuery to set the CSS of an element using one of that elements own CSS properties?

Question

I am trying to add a standard style to all javascript scripted hyperlinks in my webapps. Replacing the standard solid line with a dotted line. This can be achieved with CSS however there is a major drawback to that, the border color doesn't match the link color. I figured since the links are using JS anyways, why not do it with JS. Here is what I'm trying to do in jQuery.

$(function(){
    $('a.scripted').css({
        'text-decoration': 'none',
        'border-bottom': '1px dotted',
        'border-color': $(this).css('color'),
    });
});

However, this doesn't work. $(this) doesn't refer to the selected element and that makes sense. My question is, how can I do this? I tried wrapping it like this:

$(function(){
    $('a.scripted').ready(function(){
        $(this).css({
        'text-decoration': 'none',
        'border-bottom': '1px dotted',
        'border-color': $(this).css('color'),
        });
    });
});

This also did not work. Advice?

EDIT

This code works but not for visited links. I know about the jQuery selector :visited but how do I use that in this context?

$(function(){
    $('a.scripted').each(function(){

        var $this = $(this);

        $this.css({
            'text-decoration': 'none',
            'border-bottom': '2px dotted',
            'border-color': $this.css('color'),
        });

        $this.hover(
            function()
            {
                $this.css({
                    'text-decoration': 'none',
                    'border-bottom': '1px dotted',
                    'border-color': $this.css('color'),
                });
            },
            function()
            {
                $this.css({
                    'text-decoration': 'none',
                    'border-bottom': '1px dotted',
                    'border-color': $this.css('color'),
                });
            }
        );

        $this.click(function(){
            $this.css({
                'text-decoration': 'none',
                'border-bottom': '1px dotted',
                'border-color': $this.css('color'),
            });
        });
    });
});

tvanfosson · Accepted Answer · 2011-04-12 02:38:13Z

2

You could use each, then $(this) inside to give you a reference to the element being iterated over.

$(function(){
    $('a.scripted').each( function() {
        var $this = $(this);
        $this.css({
           'text-decoration': 'none',
           'border-bottom': '1px dotted',
           'border-color': $this.css('color')
        });
    });
});

answered Apr 12, 2011 at 2:38

tvanfosson

534k102 gold badges703 silver badges801 bronze badges

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

Comments

Jaime Rodriguez · Accepted Answer · 2011-04-12 02:38:03Z

1

I would use the each method.

$('a.scripted').each(function () {
    $(this).css({
        'text-decoration': 'none',
        'border-bottom': '1px dotted',
        'border-color': $(this).css('color'),
    });
});

answered Apr 12, 2011 at 2:38

Jaime Rodriguez

3531 silver badge8 bronze badges

Comments

Hussein · Accepted Answer · 2011-04-12 02:57:27Z

0

$(function(){
    $('a.scripted').css({
        'text-decoration': 'none',
        'border-bottom': '1px dotted ',
    });
});

Check working example at http://jsfiddle.net/qERuL/5/

edited Apr 12, 2011 at 2:57

answered Apr 12, 2011 at 2:38

Hussein

42.9k25 gold badges115 silver badges143 bronze badges

8 Comments

Jaime Rodriguez Over a year ago

in this instance, $(this) wouldn't be the a tag, so you wouldn't get the correct value. But you could instead say $('a.scripted').css('color')

Hussein Over a year ago

Try the jsfiddle link i posted

TieDyeFriday Over a year ago

this doesn't work. Notice that the $(this).css('color') is evaluated in the scope of the containing anonymous function.

theazureshadow Over a year ago

@Hussein: The javascript in your jsfiddle isn't getting run. You're missing a space after 'dotted', and in jQuery you need to reference css attributes with textDecoration and borderBottom rather than using hyphens. Even if you fixed those, Jaime was right: this is still window, and does not have css properties.

Hussein Over a year ago

not specifying a border color at all also seems to inherent text color. Check updated answer.

|

theazureshadow · Accepted Answer · 2011-04-12 02:43:15Z

-1

You really ought to do it with css, if at all possible. Wherever you set your link colors, also set the bottom color of scripted links. If you have multiple places where these links could appear (with different colors for each place), write an a.scripted block for each of them.

a {
  color: blue; /* or whatever color you like */
}
a.scripted {
  text-decoration: none;
  border-bottom: 1px dotted;
  border-color: blue; /* same as above */
}

answered Apr 12, 2011 at 2:43

theazureshadow

10.2k6 gold badges36 silver badges51 bronze badges

Collectives™ on Stack Overflow

Using jQuery to set the CSS of an element using one of that elements own CSS properties?

4 Answers 4

Comments

Comments

Check working example at http://jsfiddle.net/qERuL/5/

8 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Check working example at http://jsfiddle.net/qERuL/5/

8 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related