Addressing pseudo-element first-letter in Javascript

Discussion in 'Javascript' started by Fungii, Jan 16, 2005.

  1. Fungii

    Fungii Guest

    Hello,

    I have a stylesheet that sets p:first-letter to a certain
    size and colour. I was playing around with Javascript to change
    paragraph stylesheets using an array like this:

    var paras = document.all.tags("P");

    Although I can change the paragraph colours using this
    array, the first letter of all the paragraphs remain the same
    colour. How do I refer to an array of the pseudo-element
    p:first-letter in the same way as the p tag?

    Thanks!

    Fungii
     
    Fungii, Jan 16, 2005
    #1
    1. Advertising

  2. Fungii wrote:


    > I have a stylesheet that sets p:first-letter to a certain
    > size and colour. I was playing around with Javascript to change
    > paragraph stylesheets using an array like this:
    >
    > var paras = document.all.tags("P");


    That doesn't change any stylesheets at all, you would need to use
    document.styleSheets
    to change style sheets.

    > Although I can change the paragraph colours using this
    > array, the first letter of all the paragraphs remain the same
    > colour. How do I refer to an array of the pseudo-element
    > p:first-letter in the same way as the p tag?


    I don't think the DOM provides access to pseudo elements, you can
    however (in IE/Win using
    document.styleSheets[index].rules[index]
    and in Mozilla using
    document.styleSheets[index].cssRules[index]
    ) access the rules in the style sheets thus if you already have a rule e.g.
    p:first-letter { font-weight: bold; }
    then you could change/add style declarations in that rule, once you have
    the rule e.g.
    rule.style.color = 'yellow';
    You can also add new rules if needed though the API in IE is different
    to the API in Mozilla (which follows the W3C DOM standard:
    <http://www.w3.org/TR/DOM-Level-2-Style/>
    ).


    --

    Martin Honnen
    http://JavaScript.FAQTs.com/
     
    Martin Honnen, Jan 16, 2005
    #2
    1. Advertising

  3. Fungii

    Fungii Guest

    Martin Honnen <> wrote in
    news:41eab59c$0$27812$-online.net:

    >
    > Fungii wrote:
    >
    >
    >> I have a stylesheet that sets p:first-letter to a
    >> certain
    >> size and colour. I was playing around with Javascript to
    >> change paragraph stylesheets using an array like this:
    >>
    >> var paras = document.all.tags("P");

    >
    > That doesn't change any stylesheets at all, you would need
    > to use
    > document.styleSheets
    > to change style sheets.


    Yes I know, I was just pointing out how I created an array that
    I can then use to modify paragraph styles like this:

    paras(i).style.color = "#ffffff";

    >> Although I can change the paragraph colours using
    >> this
    >> array, the first letter of all the paragraphs remain the
    >> same colour. How do I refer to an array of the
    >> pseudo-element p:first-letter in the same way as the p
    >> tag?

    >
    > I don't think the DOM provides access to pseudo elements,


    Bogus, you would think if they are "there" you would be able to
    get to them somehow.

    > you can however (in IE/Win using
    > document.styleSheets[index].rules[index]
    > and in Mozilla using
    > document.styleSheets[index].cssRules[index]
    > ) access the rules in the style sheets thus if you already
    > have a rule e.g.
    > p:first-letter { font-weight: bold; }
    > then you could change/add style declarations in that rule,
    > once you have the rule e.g.
    > rule.style.color = 'yellow';


    Ok, I'll look into that method. How would I get the rule index
    for p:first-letter? Say I have one stylesheet in my page and the
    first entry in that stylesheet is the "p:first-letter" entry.
    Would that mean "document.styleSheets[1].cssRules[1]" is the way
    to refer to that object?

    > You can also add new rules if needed though the API in IE
    > is different to the API in Mozilla (which follows the W3C
    > DOM standard:
    > <http://www.w3.org/TR/DOM-Level-2-Style/> ).


    Alright, thanks your prompt help. I think this was the fastest
    reply I've ever received on usenet! :)

    Fungii
     
    Fungii, Jan 16, 2005
    #3
  4. Fungii wrote:


    > How would I get the rule index
    > for p:first-letter? Say I have one stylesheet in my page and the
    > first entry in that stylesheet is the "p:first-letter" entry.
    > Would that mean "document.styleSheets[1].cssRules[1]" is the way
    > to refer to that object?


    Pretty much all indexing in JavaScript starts with index 0 so
    document.styleSheets[0]
    is the first style sheet and
    documeent.styleSheets[0].cssRules[0]
    the first rule in the first style sheet.
    You can also loop through the rules and check the selectorText property.

    --

    Martin Honnen
    http://JavaScript.FAQTs.com/
     
    Martin Honnen, Jan 16, 2005
    #4
  5. Fungii

    Fungii Guest

    Martin Honnen <> wrote in
    news:41eac3ce$0$27822$-online.net:

    > Pretty much all indexing in JavaScript starts with index 0
    > so
    > document.styleSheets[0]
    > is the first style sheet and
    > documeent.styleSheets[0].cssRules[0]
    > the first rule in the first style sheet.
    > You can also loop through the rules and check the
    > selectorText property.
    >


    Really? I thought Javascript was that weird language that began
    their indexes at 1 instead of 0. My bad.

    Alright thanks, that should do the trick! :)

    Fungii
     
    Fungii, Jan 16, 2005
    #5
  6. Fungii

    RobG Guest

    Fungii wrote:
    > Martin Honnen <> wrote in
    > news:41eac3ce$0$27822$-online.net:
    >
    >
    >>Pretty much all indexing in JavaScript starts with index 0
    >>so
    >> document.styleSheets[0]
    >>is the first style sheet and
    >> documeent.styleSheets[0].cssRules[0]
    >>the first rule in the first style sheet.
    >>You can also loop through the rules and check the
    >>selectorText property.


    You are better off to loop through all the style sheet and then the
    styles. For the sake of development, print out the selectorText and
    check in various versions of IE.

    From memory, the selectorText for:

    .aClass { ... }

    will be ".aClass" (whereas the className will be "aClass") for W3C
    compliant browsers, but some (older) versions of IE prepend an
    asterisk: "*.aClass".

    The selector text for "p:first-letter" should be exactly that, but may
    be "*p:first-letter" in older IE.

    Incidentally, rather than:

    var paras = document.all.tags("P");

    Use (for cross-browser compatibility):

    if (document.getElementsByTagName) {
    var paras = document.getElementsByTagName("P");
    } else if (document.all) {
    var paras = document.all.tags("P");
    }

    --
    Rob
     
    RobG, Jan 17, 2005
    #6
  7. Fungii

    RobB Guest

    Fungii wrote:
    > Martin Honnen <> wrote in
    > news:41eac3ce$0$27822$-online.net:
    >
    > > Pretty much all indexing in JavaScript starts with index 0
    > > so
    > > document.styleSheets[0]
    > > is the first style sheet and
    > > documeent.styleSheets[0].cssRules[0]
    > > the first rule in the first style sheet.
    > > You can also loop through the rules and check the
    > > selectorText property.
    > >

    >
    > Really? I thought Javascript was that weird language that began
    > their indexes at 1 instead of 0. My bad.
    >
    > Alright thanks, that should do the trick! :)
    >
    > Fungii


    Maybe this will be of some help. Big disappointment: Opera v.7 tossed
    in everything but the kitchen sink - and a document.styleSheets
    collection. Just fyi.

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">

    <html>
    <head>
    <title>untitled</title>
    <style type="text/css">

    body {
    height: 100%;
    font-size: 100%;
    }
    p {
    width: 400px;
    margin: 160px auto;
    font: normal 80% times, sans-serif;
    color: darkgreen;
    text-align: justify;
    padding: 6px;
    border: 1px #000 dashed;
    background: #fafffa;
    cursor: pointer;
    }
    p:first-letter {
    font: bolder 120% times, sans-serif;
    color: black;
    }

    </style>
    <script type="text/javascript">

    function modCSS(selector /* [attribute/value pairs] */)
    {
    if ('undefined' != typeof document.styleSheets)
    {
    var nsheets = document.styleSheets.length,
    re = new RegExp('\\b' + selector + '\\b', 'i'),
    SS,
    rtype,
    rule,
    rules,
    nrules;
    for (var nsheet = 0; nsheet < nsheets; ++nsheet)
    {
    SS = document.styleSheets.item(nsheet);
    rtype = ('undefined' != typeof SS.rules) ? 'rules' : 'cssRules';
    if ('undefined' != typeof SS[rtype])
    {
    rules = SS[rtype];
    nrules = rules.length;
    for (nrule = 0; nrule < nrules; ++nrule)
    {
    rule = rules.item(nrule);
    if (re.test(rule.selectorText))
    {
    for (var a = 1; a < arguments.length; a += 2)
    rule.style[arguments[a]] = arguments[a + 1];
    return;
    }
    }
    }
    }
    }
    }

    window.onload = function()
    {
    document.onclick = function()
    {
    modCSS('p', 'color', 'black', 'fontSize', '90%');
    modCSS('p:first-letter','color', 'green', 'fontSize', '160%');
    modCSS('body', 'background', 'darkolivegreen');
    }
    }

    </script>
    </head>
    <body>
    <p title="click me">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna
    aliqua. Ut enim ad minim veniam, quis nostrud exercitation
    ullamco laboris nisi ut aliquip ex ea commodo consequat.
    Duis aute irure dolor in reprehenderit in voluptate velit
    esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
    occaecat cupidatat non proident, sunt in culpa qui officia
    deserunt mollit anim id est laborum.
    </p>
    </body>
    </html>
     
    RobB, Jan 18, 2005
    #7
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Jonathan N. Little
    Replies:
    1
    Views:
    510
    Jonathan N. Little
    Nov 2, 2005
  2. Troy Piggins
    Replies:
    4
    Views:
    649
    Troy Piggins
    Feb 22, 2006
  3. vertigo

    big letter -> small letter

    vertigo, Jul 6, 2004, in forum: Python
    Replies:
    4
    Views:
    808
    Reinhold Birkenfeld
    Jul 6, 2004
  4. Tony Meyer

    RE: big letter -> small letter

    Tony Meyer, Jul 6, 2004, in forum: Python
    Replies:
    0
    Views:
    521
    Tony Meyer
    Jul 6, 2004
  5. bongo

    pseudo-element: first-line

    bongo, Dec 9, 2006, in forum: HTML
    Replies:
    3
    Views:
    344
    Bergamot
    Dec 9, 2006
Loading...

Share This Page