Addressing pseudo-element first-letter in Javascript

[Fungii]

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

 

[Martin Honnen]

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/>
).

 

[Fungii]

Fungii wrote:



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";

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

 

[Martin Honnen]

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.

 

[Fungii]

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

 

[RobG]

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");
}

 

[RobB]

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>