Can a style or class have a function? 1

[jsteph]

Hi all,
Without looping through all elements of a tagname or classname, can I simply define a javascript function as an attribute of a style class or an element?

For example, I tried the below and it doesn't work but I'm wondering if it *could* work but I've just got the syntax wrong:

<style>

INPUT {
background-color:#000000;
onclick=function(event){alert(event.srcElement.id)}
}

</style>

Thanks,
--Jim

 

[darryncooke]

I could be wrong -- but no this will not work.

Style sheets only purpose are to outline how the page will look.

Darryn Cooke

http://www.darryncooke.com

| The New Orange County Graphic designer and Marketing and Advertising Consultant

http://www.bloobie.com

| Marketing and Advertising blog

 

[TrojanWarBlade]

Of course you *could* have a pseudo class (that needs no style per-se) and use a JavaScript function to walk the DOM tree assigning JavaScript functionality to anything that uses that class.
Indeed, you could use some kind of lookup to assign all your functions based on class name.

HTH.


Trojan.

 

[jmeckley]

you cannot define functions within the style element. style is just that presentation. you will need to use js to wire the click handler.

if you use a js library like jquery, you can hook functions to multiple elements like this

$(":button.foo").click(function(){
   alert(event.srcElement.id);
});

which would attach itself to any element that is a button and has the class "foo". the online documentation for jquery and the jquery forum (google groups) is very good.

Jason Meckley
Programmer
Specialty Bakers, Inc.

faq855-7190

 

[BillyRayPreachersSon]

You can write some JavaScript code in your CSS files, but it's only supported by IE browsers.

If you want to know more, search for 'CSS expressions'.

An example might be:

someElRule {
   height: 10px;
   _height: expression((this.parentNode.offsetHeight - 5) + 'px');
}

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:

http://www.codecouch.com/dan/

Code Couch Tech Snippets & Info:

http://www.codecouch.com/

 

[jmeckley]

Dan, I didn't know that. Although this does seem like a scenario where it's possible, but not beneficial. I wouldn't want to be in a situation where debugging java script meant browsing the css file.

Jason Meckley
Programmer
Specialty Bakers, Inc.

faq855-7190

 

[BillyRayPreachersSon]

I wouldn't want to be in a situation where debugging java script meant browsing the css file.

I'd like to promise with the advent of IE 8 being 'standards compliant' that you wouldn't have to... and you don't - but for the wrong reason:

- IE 8 in 'standards' mode doesn't support expressions.

You may ask 'why would you need expressions in a standards compliant browser?' or 'Why is that the wrong reason'?

It's simple. There are still bugs, and IE 8 will still do some things different from other standards compliant browsers.

While writing a tricky template recently, I had cause to use expressions in IE 8, because it wasn't playing ball whereas Fx 3, Safari 4, Chrome, and Opera all worked perfectly.

I was horrified to find out that I had to put IE 8 into compatibility mode to fix the problem (because a simple CSS hack just wouldn't cut the mustard).

So much for being better than all the rest. Microsoft is welcome to keep it, as far as I am concerned.



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:

http://www.codecouch.com/dan/

Code Couch Tech Snippets & Info:

http://www.codecouch.com/