Wrox Programmer Forums
Go Back   Wrox Programmer Forums > Web Programming > JavaScript > Javascript How-To
| Search | Today's Posts | Mark Forums Read
Javascript How-To Ask your "How do I do this with Javascript?" questions here.
Welcome to the p2p.wrox.com Forums.

You are currently viewing the Javascript How-To section of the Wrox Programmer to Programmer discussions. This is a community of software programmers and website developers including Wrox book authors and readers. New member registration was closed in 2019. New posts were shut off and the site was archived into this static format as of October 1, 2020. If you require technical support for a Wrox book please contact http://hub.wiley.com
  #1 (permalink)  
Old February 28th, 2008, 11:05 AM
Authorized User
Join Date: Nov 2007
Location: , , .
Posts: 15
Thanks: 0
Thanked 0 Times in 0 Posts
Default How to access CSS using JavaScript?

I would like to use a JavaScript to get the values of CSS properties and to set them. But I am not sure how CSS is exposed in the DOM. I don't think that you can access CSS from server-side code-behind because CSS resides on the client. That's OK because I want to access it on the client with JavaScript.

How are CSS declarations exposed in the DOM? How can JavaScript access it?

  #2 (permalink)  
Old February 28th, 2008, 12:11 PM
joefawcett's Avatar
Wrox Author
Points: 9,763, Level: 42
Points: 9,763, Level: 42 Points: 9,763, Level: 42 Points: 9,763, Level: 42
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
Join Date: Jun 2003
Location: Exeter, , United Kingdom.
Posts: 3,074
Thanks: 1
Thanked 38 Times in 37 Posts

It depends somewhat on what you need to do. You can tinker with individual elements by accessing the style property, the className (CSS class) and the cssText. You can also access the linked and inline stylesheets, see this URL: http://www.javascriptkit.com/dhtmltu...ernalcss.shtml

IE and Gecko/Mozilla used to have slightly different names for some of the properties, no surprise there... I haven't done much development in this area recently so maybe things have improved.


Joe (Microsoft MVP - XML)
  #3 (permalink)  
Old February 28th, 2008, 01:32 PM
Authorized User
Join Date: Nov 2007
Location: , , .
Posts: 15
Thanks: 0
Thanked 0 Times in 0 Posts

Thanks Joe. I have an ASP.NET page that pops up a FormView control that I enclosed in a DragPanelExtender so that the user can drag it to a convenient place on the page. The problem is that the DragPanel jumps back to the original position specified in the CSS every time a user clicks the FormView control or clicks a select button on the GridView that is its data source.

My idea is to adjust the CSS left and top properties for the panel when the ondrop event fires a JavaScript. The JavaScript would set the top and left properties to the current location of the panel. (I'm hoping I can GET the current location!)

I'm surprised at how much work it is to make a simple thing like that happen. But I'm using VS 2005. Maybe it got easier in VS 2008. Maybe there is another easier way to popup a draggable non-modal panel, tied to a row in the GridView, that provides a way for a user to add some data. This should be something that everyone does. I just am not aware of the best practice for this. Do you know of a way?

I'll take a look at the web site you recommended. Thanks!

Similar Threads
Thread Thread Starter Forum Replies Last Post
replace css with javascript Maxxim CSS Cascading Style Sheets 11 October 7th, 2007 02:29 PM
external CSS in JavaScript code webdesign Javascript 1 September 1st, 2006 04:35 PM
from javascript to css jstewie CSS Cascading Style Sheets 3 August 8th, 2005 02:44 PM
from javascript to css jstewie Javascript How-To 0 August 3rd, 2005 07:09 AM
Netscape Layers Using CSS+JavaScript(DOM) anshul Javascript How-To 2 May 26th, 2004 01:51 PM

Powered by vBulletin®
Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.
Copyright (c) 2020 John Wiley & Sons, Inc.