»
EnglishFrenchVietnamese

Print - Repeated Colours for HTML Elements with JavaScript - JavaScriptBank.com

Full version: jsB@nk » Form » Table » Repeated Colours for HTML Elements with JavaScript
URL: https://www.javascriptbank.com/javascript-repeated-colours-html-elements.html

Repeated Colours for HTML Elements with JavaScript © JavaScriptBank.comSometimes in the long content, we have to make our audiences feel comfortable to read/follow. And we usually have many solutions for this task, and herein this JavaScript code example, I would like to present a simple way: automatically filling the background color of paragraphs.This JavaScript code can change background color of all HTML text-container elements when you pass them (edit source code). It's very easy to use and modify!

Full version: jsB@nk » Form » Table » Repeated Colours for HTML Elements with JavaScript
URL: https://www.javascriptbank.com/javascript-repeated-colours-html-elements.html



CSS
<style type="text/css">/*     This script downloaded from www.JavaScriptBank.com     Come to view and download over 2000+ free javascript at www.JavaScriptBank.com*/#container p {  padding: 10px;}</style>


JavaScript
<script type="text/javascript">// Created by: Mr. J | http://www.huntingground.net/// This script downloaded from www.JavaScriptBank.comfunction colourDivs(){  // Set the tag name below that you want to use  el=document.getElementById("container").getElementsByTagName("p")  numOfDivs=el.length  for(i=0;i<numOfDivs;i++){    if((i+1)%2==0) {      el[i].style.backgroundColor="#00009C"      el[i].style.color="#fff"    } else {      el[i].style.backgroundColor="#FFCF31"      el[i].style.color="#000"    }  }}// Multiple onload function created by: Simon Willison// http://simonwillison.net/2004/May/26/addLoadEvent/function addLoadEvent(func) {  var oldonload = window.onload;  if (typeof window.onload != 'function') {    window.onload = func;  } else {    window.onload = function() {      if (oldonload) {        oldonload();      }      func();    }  }}addLoadEvent(function() {  colourDivs();});</script>


HTML
<!--  The section to be highlighted must be placed within this DIV.  --><div id="container"><p>Eum dolorem qualisque ne, in ius aperiri propriae, an nulla tollit impetus has. Qui euismod neglegentur consectetuer id, movet facete pri no. Novum affert eu mea.</p><p>Te his volumus indoctum. No dolorum iudicabit consetetur cum, vim facete imperdiet maiestatis eu. Qui ei semper virtute recusabo, dicam molestie disputando vis te, at quo elit labitur nostrud.</p><p>Quis takimata referrentur quo ei, an vis contentiones voluptatibus. In quando officiis persecuti est. Quo ut mollis iuvaret. Sit id alii falli.</p><p>Usu omnis malis verear at, nostrud oportere intellegebat ad quo, in dicant eirmod minimum per. At commune dissentias vel.</p></div><!--  End of section to be highlighted.  -->