423,109 Members | 2,116 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 423,109 IT Pros & Developers. It's quick & easy.

Functions within the style="" attribute

100+
P: 144
I hope this is just a syntax issue, but I can call a function when a page is served up like this:
Expand|Select|Wrap|Line Numbers
  1. <%
  2. Function FFcolor(x)
  3.     Select case x
  4.     case 1: FFcolor = "#FF0000"
  5.     case 2: FFcolor = "something else"
  6.   etc.
  7. End Function
  8. %>
which called from my element "<a" within the style attribute like this
Expand|Select|Wrap|Line Numbers
  1. <a ... style="color: <%=FFcolor(x)%>; ... >
and the color is set to #FF0000 or something else.

But I can't find a similar way to call a javascript function like this
Expand|Select|Wrap|Line Numbers
  1. <script type="text/javascript">
  2. function FFcolor(x) {
  3.     switch (x) {
  4.             case 1:  return "#FF0000";
  5.             case 2:  return "something else";
  6.    etc. }
  7. }
  8. </script>
from inside the
Expand|Select|Wrap|Line Numbers
  1. <a ... style="color: [ javascript function call?]; ... >
I want to change the font depending on the page, but use the same function for events.

Since I already have functions setup to do this for events (mouseover, etc) I want to use the same functions for initializing a new page (like a refresh). In other words, the color changes from some previous color when the page is presented, conditioned on a "pagename" variable, then changes onmouseover, and changes back to the first color onmouseout (without any onclick action). Each page starts out with its unique font color.

The mouseover & mouseout, and "I wish" the startup font color results should be based on the same function using the same "switch" subfunction.

I can use the first example, <%= %> for the startup color but not for the events (because of some further manipulation I do); and that means I have to have similar routines, "switch" and "Select Case" statements, in 2 locations, one for ASP and one for Javascript.

Repeating, I need some javascript syntax to call from inside the style=" attribute so that the pair color:value is really a color:function. I've tried a lot of ways without any errors but no color actually comes back in javascript. The result should be ... style="color: #FF0000; ... "or some other color"

Anybody?
Jan 14 '12 #1

✓ answered by Dormilich

what you try to do is not possible (with this approach). reason: in the first example you use a server-side script (ASP?). at this point, the whole HTML page is just a string inside the script. JavaScript on the other hand side works on the client and when it is invoked, the HTML source code is already rendered. hence there is no way to influence the output by changing the source code. what you need to do is change the page representation (the DOM tree) the browser generated.

for changing a CSS property you would have to set/alter the Element’s style object elem.style.color = "red"; (of course you could also use a function’s return value).

Share this Question
Share on Google+
4 Replies


Dormilich
Expert Mod 5K+
P: 8,639
what you try to do is not possible (with this approach). reason: in the first example you use a server-side script (ASP?). at this point, the whole HTML page is just a string inside the script. JavaScript on the other hand side works on the client and when it is invoked, the HTML source code is already rendered. hence there is no way to influence the output by changing the source code. what you need to do is change the page representation (the DOM tree) the browser generated.

for changing a CSS property you would have to set/alter the Element’s style object elem.style.color = "red"; (of course you could also use a function’s return value).
Jan 14 '12 #2

100+
P: 144
Thanks Dormilich. That makes sense. I was trying to re-render the page or something like that and a little bit confused. I got it. Thanks for your time.
Jan 14 '12 #3

P: 1
you can use by using below concept :

Expand|Select|Wrap|Line Numbers
  1. style="color: '+ fnGetPermission(name)+'"
  2.  
  3.  
  4. function fnGetPermission(name){
  5.         var permissionArray = localStorage.getItem("permissionArray").split(',');
  6.         if($.inArray(permissionArray) == true) {
  7.             return "red;
  8.         } else {
  9.             return "blue";
  10.         }
  11.         }
Dec 27 '17 #4

P: 5
Calling a JS function from Server side method is not possible.
Feb 1 '18 #5

Post your reply

Sign in to post your reply or Sign up for a free account.