javascript - setAttribute() is setting the text of function as href value -
the title didn't make sense here's what's happening. i'm trying run onclick()
function swap stylesheets visual change. way i'm doing replace()
part of href
value. specifically, i'm changing word white black in order change value of href
styles-black.css
styles-black.css.
i'm doing no problem in jquery:
$(".onoffswitch").click(function(){ if($('.onoffswitch-checkbox').is(':checked') == false) { $("#pagestyle").attr('href', function(i, blackcss) { return blackcss.replace('white', 'black'); }); }
});
i'm no expert might inefficient i'm still trying learn. now, when try replicate using vanilla js weird results. first, here's code:
document.getelementbyid("pagestyle").setattribute("href", (function(i,blackcss) { return blackcss.replace("white", "black"); }))
after run it, follow document.getelementbyid('pagestyle').getattribute('href');
to check value of href
see whether or not function worked and.....this i'm getting:
"function (i,blackcss) { return blackcss.replace("white", "black"); }"
here's element:
<link id="pagestyle" rel="stylesheet" type="text/css" href="function (i,blackcss) { return blackcss.replace("white", "black"); }">
clearly i'm doing wrong. weird thing if weren't checking myself, i'd think worked! styles change. if inspect elements using chrome/ie tools, can see styles styles-black.css being applied! why hell showing function in element's attribute? can't right can it? of course, i'm open wants show me how it's done.
edit here's initial state of element:
<link id="pagestyle" rel="stylesheet" type="text/css" href='css/styles-white.css'>
that's expected, because attribute values can strings, function converted string.
in vanilla-js this:
var el = document.getelementbyid("pagestyle"), initial = el.getattribute("href"); el.href = initial.replace("white", "black");
<link id="pagestyle" rel="stylesheet" type="text/css" href='css/styles-white.css'>
Comments
Post a Comment