• Advertisement
Sign in to follow this  

[web] How to refer to a paragraph in HTML

This topic is 4793 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

If you intended to correct an error in the post then please contact us.

Recommended Posts

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.

Share this post


Link to post
Share on other sites
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 javascript manipulation of other elements.

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.

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.

What you should avoid doing is using nonstandard, browser-specific methods like IE's "document.all".

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.

Mark

Share this post


Link to post
Share on other sites
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?

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites
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?

Share this post


Link to post
Share on other sites
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).

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites
this is kind of rudimentary, but you get the idea...
[php]
<style>
p.red {
color: red;
}
p.black {
color:black;
}
</style>
<script language="javascript">
function change(thing,newClass) {
thing.className = newClass;
}
</script>
<p class="black" onmouseover="change(this,'red')" onmouseout="change(this,'black')">
some text


[/php]

Share this post


Link to post
Share on other sites
Tesseract, I appricate the suggestion, but I don't know php. Can you try to explain it so I can understand what it does or how to implement in a notepad html file?

Share this post


Link to post
Share on other sites
That code is pure HTML and javascript. I presume it was wrapped in [php] tags because Tesseract thought it would make it look like code. (Should use source tags instead.)

Share this post


Link to post
Share on other sites
Sign in to follow this  

  • Advertisement