Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > Addressing pseudo-element first-letter in Javascript

Reply
Thread Tools

Addressing pseudo-element first-letter in Javascript

 
 
Fungii
Guest
Posts: n/a
 
      01-16-2005
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
 
Reply With Quote
 
 
 
 
Martin Honnen
Guest
Posts: n/a
 
      01-16-2005


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/
 
Reply With Quote
 
 
 
 
Fungii
Guest
Posts: n/a
 
      01-16-2005
Martin Honnen <(E-Mail Removed)> wrote in
news:41eab59c$0$27812$(E-Mail Removed)-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

 
Reply With Quote
 
Martin Honnen
Guest
Posts: n/a
 
      01-16-2005


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/
 
Reply With Quote
 
Fungii
Guest
Posts: n/a
 
      01-16-2005
Martin Honnen <(E-Mail Removed)> wrote in
news:41eac3ce$0$27822$(E-Mail Removed)-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
 
Reply With Quote
 
RobG
Guest
Posts: n/a
 
      01-17-2005
Fungii wrote:
> Martin Honnen <(E-Mail Removed)> wrote in
> news:41eac3ce$0$27822$(E-Mail Removed)-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
 
Reply With Quote
 
RobB
Guest
Posts: n/a
 
      01-18-2005
Fungii wrote:
> Martin Honnen <(E-Mail Removed)> wrote in
> news:41eac3ce$0$27822$(E-Mail Removed)-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>

 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Network Infrastructure IP address re-addressing Niche Cisco 1 01-12-2005 05:08 AM
addressing modes controller source code Roberto VHDL 1 11-22-2004 05:54 PM
call manager re-addressing Bill F Cisco 1 05-17-2004 05:51 PM
setting relative addressing in composer refuses to work ken Firefox 0 12-10-2003 07:11 PM
Addressing the recent Cisco IOS bug totojepast Cisco 10 07-25-2003 05:15 PM



Advertisments