[web] How to refer to a paragraph in HTML

Started by
11 comments, last by Kylotan 19 years, 3 months ago
I'm having a little bit trouble trying to figure this out. I've searched google and I can't find in any example how to refer to this.

<html>
<head>
<script>
function qrw() {document.paragraphs.cow.style.color="red"}
</script>
</head>
<body>
<p name="cow">Hi
</body> </html> I can't for my life find how to refer to the

paragraphs. I know how to use getElementById, but I need to learn how to do it this way as well.

Advertisement
There is no DOM0 way of manipulating elements which are not images, form fields etc. This is because those old browsers (Netscape3 etc), did not support &#106avascript manipulation of other elements.<br><br>You should use document.getElementById() as it's the modern, correct way to do it. There are other ways as well through the "DOM1" interface, you can loop through child nodes etc, and generally do anything you want to the document in the page.<br><br>The document.images, document.forms etc are part of what we call "DOM0" - an old-fashioned way of scripting web pages. It's still used by some people out of habit or intertia. It's not likely to be deprecated any time soon.<br><br>What you should avoid doing is using nonstandard, browser-specific methods like IE's "document.all".<br><br>You'll note that with DOM0 images, forms etc, names do not need to be unique between different types of object - but with the "id=" attribute typically used to find elements in DOM1, they do. Most people consider this a good thing anyway.<br><br>Mark
I'm sorry for not completing my code, I was caught at the bell at my school, but felt there was enough info typed to go ahead and post my question. Here is my problem and the reason why I was asking how to do that.

<html><head><script>function cColor() {document.getElementById('0').style.color=document.getElementById('5').value}function cColor1() {document.getElementById('1').style.color=document.getElementById('6').value}function cColor2() {document.getElementById('2').style.color=document.getElementById('7').value}</script></head><body id="0">Hi<p id="1">Hey</p><p id="2">Yo</p><form><input id="5"><input type="button"onclick="cColor()"value="Change"><input id="6"><input type="button"onclick="cColor1()"value="Change"><input id="7"><input type="button"onclick="cColor2()"value="Change"></form></body></html>

As you can see, if you change one of the paragraph font colors, you can no longer change them all by changing the body font color. Is there any way I can change the whole page font color with a command without having to change each paragraph in the function?
I don't know if it's a standard way but this should work:
var e = document.getElementsByTagName('p');for(i=0; i<e.length; i++){  e.style.color = document.getElementById('5').value;}


hope that helps !
Matt

edit: I tested it with Mozilla Firefox and it works great
Matt
I didn't want to post another thread, so I hope someone checks this one. I have been looking for find code for a floating button that would stay at the topright of the screen even if you scroll down. I searched google for floating gui, but that doesn't seem to be what it is called. Can anyone help me?
Isn't that just position:fixed; in CSS?
No.
Quote:Original post by Kylotan
Isn't that just position:fixed; in CSS?


Yes, but it's CSS2 and AFAIK isn't supported on IE. I googled and found a way to emulate it, but I haven't tried it out yet so don't know if it works (the demo linked on the site seems to though).
Onceloving - back to your original question, how to change all the p element colours at once.

Your best bet would be to use a programmatically generated css style sheet, or an existing style sheet and swap them around.

This would change several elements in one go.

I know css scripting is possible, but I haven't tried it and don't know how well it's supported in different browsers (usual story: all is fine in Mozilla, variable in others especially IE)

Mark
Lemurion's solution seems to work just fine.

I'm scripting in IE so position:fixed in CSS isn't really an option for me. The emulation Evolutional posted can lead to further problems due to it screwing up position:absolute.

This topic is closed to new replies.

Advertisement