/    Sign up×
Community /Pin to ProfileBookmark

Changing CSS values

Copy linkTweet thisAlerts:
Apr 12.2006

I know full well how to change css values using client-side scripting.
But heres my question… can I set (reset) a css value on event?
Anotherwords… can I assign a new value based on the status of an event handler?
With javascript, in html, you can write:

[CODE]onClick=”javascript:document.all.item.style.color=#ff0000;”[/CODE]

But what I want to know is if you can do something to the effect of:

[CODE]onClick=”style:#item {color:#ff0000;}”[/CODE]

And if so, how?
I am ultimately looking for a way to effect changes in css values, post load, without the use of javascript
I understand that some things arent possible without javascript, but event handlers are a feature html, not script (or am I wrong about that?).
If css values can be assigned during the loading process, I dont see why an event cant change them.

to post a comment
CSS

4 Comments(s) ↴

Copy linkTweet thisAlerts:
@ray326Apr 12.2006 — Sure you can do it in an event handler but you'll need to update your Javascript knowledge and move away from IE-specific code to the DOM. It will be more like this.

<a href="#" onclick="document.getElementById('item').style.color='#f00';return false;">Click me</a>

<h2 id="item">Make me Red</h2>
Copy linkTweet thisAlerts:
@squishyauthorAug 12.2006 — It looks to me that you are still using javascript... script in general.

What if client side scripting were turned off? Your example would not work, or would it?

My objective is to eliminate the need for scripting and to directly go from an event handler being activated to a css value being manipulated.
Copy linkTweet thisAlerts:
@KravvitzAug 12.2006 — Some of the events were written into the HTML 4.01 specs. In theory you could have multiple client-side scripting languages. (IE supports VBScript, but other browsers don't so it doesn't count. Besides I don't even know if putting VBScript code in an inline event handler works in IE.)

You can use [url=http://www.w3.org/TR/REC-CSS2/selector.html#dynamic-pseudo-classes]CSS2's dynamic pseudo-classes[/url] (IE5-6 don't support :focus and only supports the others on <a> elements.) to achieve a little bit, but CSS is a language for presentation, not behavior -- for anything beyond those you need a scripting language.

Since you seem concerned, I suggest you read these:

[url=http://weblog.burningbird.net/archives/2005/03/25/the-importance-of-degrading-gracefully/]The Importance of Degrading Gracefully[/url]

[url=http://domscripting.com/blog/display.php/25]Perpetuating the myths of JavaScript degradation.[/url]

and these:

[url=http://www.alistapart.com/articles/behavioralseparation/]Behavioral Separation[/url]

[url=http://www.onlinetools.org/articles/unobtrusivejavascript/]Unobtrusive JavaScript[/url]

[url=http://www.domscripting.com/book/sample/]DOM Scripting - Sample chapter: Best Practices[/url]

[url=http://www.severnsolutions.co.uk/articles/001/]Accessible DHTML[/url]
Copy linkTweet thisAlerts:
@ray326Aug 14.2006 — "event handler" == "language binding"

You can't handle events without client side scripting.
×

Success!

Help @squishy spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...