Using jQuery to set the CSS of an element using one of that elements own CSS properties? -
i trying add standard style javascript scripted hyperlinks in webapps. replacing standard solid line dotted line. can achieved css there major drawback that, border color doesn't match link color. figured since links using js anyways, why not js. here i'm trying in jquery.
$(function(){ $('a.scripted').css({ 'text-decoration': 'none', 'border-bottom': '1px dotted', 'border-color': $(this).css('color'), }); }); however, doesn't work. $(this) doesn't refer selected element , makes sense. question is, how can this? tried wrapping this:
$(function(){ $('a.scripted').ready(function(){ $(this).css({ 'text-decoration': 'none', 'border-bottom': '1px dotted', 'border-color': $(this).css('color'), }); }); }); this did not work. advice?
edit
this code works not visited links. know jquery selector :visited how use in 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'), }); }); }); });
you use each, $(this) inside give reference 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') }); }); });
Comments
Post a Comment