Using jQuery to set the CSS of an element using one of that elements own CSS properties?
<p>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.</p>

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

<p>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:</p>

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

<p>This also did not work. Advice?</p>

<p><strong>EDIT</strong></p>

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

<pre><code>$(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'),
            });
        });
    });
});
</code></pre>
