更改 <p> 使用纯JavaScript基于文本长度的CSS样式

Question

I would like to style a <p> dependant on the amount of text it contains ;
using plain - vanila javaScript {no external library}
+ of course css & html 4.1 for use in pre 29 FireFox.
Using 1 : Change an element's class with JavaScript - for the way to reference the html element getElementById("MyElement") ...
and adapting : How to detect when multiple lines are occurring in a div? ele.innerHTML.length >= 70 to my specific needs.
I cannot get http://jsfiddle.net/positive_x/HeCj7/ to work.
In that jsfiddle , I am trying to use the first way to prove - out & learn the algorithm ;
html + css & javaScript in the jsfiddle . net / positive_x / HeCj7 /

<aside>
    <p>This is a plain - old paragraph.</p>
    <p id='p_id1'>This is the p_id1 (blue) p</p>
    <p id='p_id2'>This is the p_id2 (really l o n g ___ R E D ) paragraph . </p>
    <p class='styletest'>This is a short class= p</p>
    <p class='styletest'>This is other class= (really long _ R E D) paragraph .</p>
</aside>
<script>window.onload = style_byID_Blue_short_p;</script>

/* css in jsfiddle */

.blue {color: #117;}
.green {color: #161;}
.red  {color: #511;}

/* javascript in jsfiddle TESTing 1 getElementById('idname') way */

function style_byID_Blue_short_p () {
    var textIn = document.getElementById('p_id1');
    var txtLen = textIn.innerHTML.length;
    if( txtLen<30 ){
        textIn.className += ' blue'; //turn it blue
        alert('here is style_byID_Blue_short_p that IDS blue!'); //for testing
    } else {
        textIn.style.color = #511; //turn it red
        alert('style_byID_Blue_short_p that is red.'); //for testing
    }
}

Additionally, I really need to apply the styling to a number of <p>
via the getElementsByClass("myclassname") that is in the second part of the jsfiddle shown in the jsfiddle itself.
The required array nomenclature has me intimidated ; (
; so I attempted the first _ simpler portion first .
As a copy-&-paste coder , I could use your help.
Best regards.

Answer 1

Well, besides the tons of syntax and spelling errors and not placing CSS colors in quotes (you should really use the browser console and JSHint on jsfiddle), your problem has to do with the fact that your handlers aren't applied properly.

You need to use addEventHandler to make sure the event handlers are attached after your javascript is parsed. If you had checked the console, you'd have seen that they are undefined at load time, hence nothing runs.

Instead of:

<script>
    window.onload = style_byClass_RED_Long;
</script>

do

window.addEventListener('onload', style_byClass_RED_Long);

and put that in your javascript. However, that might not work in a fiddle, so just call your functions at the bottom of your javascript and it should produce your results. For all practical purposes, it should be the same thing as using onload .

here's your fiddle fixed: http://jsfiddle.net/HeCj7/9/

also, getElementsByClassName returns an array of elements, not a single one. You'll need to enumerate the elements and change each one separately. In your code, i simply changed it so that it refers to the first element only, which means your second <p> with that class will remain unstyled.