Question

我想根据其中包含的文字数量设置<p>的样式;
使用plain - vanila javaScript {无外部库}
+ 当然是css ＆amp; html 4.1用于前29 FireFox。
使用1：Change an element's class with JavaScript - 用于引用html元素getElementById("MyElement") ...的方式并根据我的具体需求调整How to detect when multiple lines are occurring in a div? ele.innerHTML.length >= 70。
我无法让http://jsfiddle.net/positive_x/HeCj7/工作在那个jsfiddle中，我试图用第一种方式来证明 - 输出＆amp;学习算法;
html + css＆amp; jsfiddle中的javaScript 。 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>

jsfiddle * /

中的

/ * css

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

jsfiddle中的

/ * javascript 测试1 getElementById（＆＃39; idname＆＃39;）方式* /

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
    }
}

此外，我确实需要将样式应用于多个<p>
通过jsfiddle本身显示的jsfiddle第二部分中的getElementsByClass("myclassname")。
所需的阵列命名法让我感到害怕; （
;所以我尝试了第一个_更简单的部分第一个 作为copy-&-paste编码员，我可以使用您的帮助最好的问候。

Answer 1

好吧，除了大量的语法和拼写错误而且没有在引号中放置CSS颜色（你应该在jsfiddle上使用浏览器控制台和JSHint），你的问题与你的处理程序不是这样的事实有关适当地应用。

您需要使用addEventHandler来确保在解析javascript后附加事件处理程序。如果您已经检查过控制台，那么您已经看到它们在加载时未定义，因此没有任何运行。

而不是：

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

DO

window.addEventListener('onload', style_byClass_RED_Long);

并将其放入您的javascript中。但是，这可能不适用于小提琴，所以只需在javascript的底部调用您的函数，它就会产生结果。出于所有实际目的，它应该与使用onload。

相同

这里是你的小提琴：http://jsfiddle.net/HeCj7/9/

另外，getElementsByClassName会返回array个元素，而不是单个元素。您需要枚举元素并分别更改每个元素。在您的代码中，我只是更改它，使其仅引用第一个元素，这意味着您对该类的第二个<p>将保持不正常。

使用普通javaScript </p>更改基于文本长度的<p> css样式

1 个答案: