SitePoint Sponsor

User Tag List

Results 1 to 6 of 6

Hybrid View

  1. #1
    I ♥ PHP
    Join Date
    Jul 2003
    Location
    Melbourne, Australia
    Posts
    579
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Creating Style properties

    Hi guys,

    Using Javascript I know you can create elements on the page, but is it possible to create properties within the Style element?

    For instance, I want to create the following CSS style:
    Code:
    .className
    {
      background-color: #9cf;
      border-top: 2pt solid #000;
      border-right: 1pt solid #000;
      border-bottom: 1pt solid #000;
      border-left: 1pt solid #000;
    }
    Is this possible using the DOM, or will I need to export all of my styles in one long text string and replace the Style tags innerHTML?

    Thanks guys,
    Jordan

  2. #2
    Caveat surfer Buddy Bradley's Avatar
    Join Date
    May 2003
    Location
    Cambridge, UK
    Posts
    2,366
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can do it by altering the .style properties of the element:
    Code:
    elem.style.backgroundColor = '#9cf';
    elem.style.borderTop = '2pt solid #000';
    (note: I'm not sure if you can use shorthand properties like that, actually)

    CSS style properties (lower-case, hyphenated) become DOM style properties (camelCase, non-hyphenated).

    You shouldn't really do that anyway - much easier to simply apply the relevant class to your element and keep your styling in the CSS:
    Code:
    elem.className = 'className';

  3. #3
    I ♥ PHP
    Join Date
    Jul 2003
    Location
    Melbourne, Australia
    Posts
    579
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Bradley, though I can't possibly do this for every element that share a classname. I guess then that the only option is to write out the innerHTML of the style tag in one hit.

    Thanks,
    Jordan

  4. #4
    I ♥ PHP
    Join Date
    Jul 2003
    Location
    Melbourne, Australia
    Posts
    579
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hmmmm, it seems, like the rest of my project, that this is going to be another part to cause me grief. Apparently I cannot write to the innerHTML of the style tag.

    Is the only option I have to modify the style attributes one by one for each element? Will I need to loop through them all individually and apply the styles?

    Surely there has to be a better way to handle this? Perhaps I will create individual CSS files and load and unload them for each selection... Hmmmmm.

    Anyone got any other ideas?

    Regards,
    Jordan

  5. #5
    Caveat surfer Buddy Bradley's Avatar
    Join Date
    May 2003
    Location
    Cambridge, UK
    Posts
    2,366
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Why can't you apply the .className CSS class to the elements as you create them? Surely you're not going to have a totally different appearance for every single element, so there will only be a relatively small number of additional CSS rules needed.

    And you don't need to loop through them all, you can just apply the .className when the element is created.

  6. #6
    I ♥ PHP
    Join Date
    Jul 2003
    Location
    Melbourne, Australia
    Posts
    579
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That is how I have it setup at present Buddy Bradley. I need to insert the actual CSS dynamically though, this is the problem. I don't seem to be able to write to the <style> tag's innerHTML, only read from it. This is why I thought I may need to apply the styles one by one to each individual element.

    Also just to note I cannot have the CSS hardcoded in to the HTML page unfortunately.

    I am trying another option now though, if it works I'll let you know.

    Regards,
    Jordan


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •