« »

Sometimes 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!

Label: JavaScript background color, repeated Colours, HTML Elements

Report to us error of this JavaScript

Demo
Enlarge
Reload
New window

Free iPage Web Hosting for First Year NOW

If you're still looking for a reliable web host provider with affordable rates, why you don't take a little of time to try iPage, only with $1.89/month, included $500+ Free Extra Credits for the payment of 24 months ($45)?

Over 1,000,000+ existisng customers can not be wrong, definitely you're not, too! More important, when you register the web hosting at iPage through our link, we're going to be happy for resending a full refund to you. That's awesome! You should try iPage web hosting for FREE now! And contact us for anything you need to know about iPage. Try iPage for FREE First Year NOW

Code
CSS
JavaScript
HTML
Print

Copy All x2

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

Copy All x2

<script type="text/javascript">
// Created by: Mr. J | http://www.huntingground.net/
// This script downloaded from www.JavaScriptBank.com

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

Copy All x2

<!--  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.  -->

Comment (1)
Write

by hostjunkies, 20/12/2010 09:12 PM
Thanks! Reply

This should come in handy in the future. Thanks for sharing. i will save it away for future use.

by Preview

Cancel reply

Write your comment

Comments of Guest will be previwed before published
Give your real email to get notifying replies, or comment will be deleted

Your name *
Your email^g *
~~Your site~~

Comment's title

I assure 100% I am real human
I repeat I am not bot

Sent (0)
New

BBCode
HTML
URL
JID

https://tooly.win
Open tool hub for free to use by any one for every one with hundreds of tools

chatGPTaz
Voice chat comning soon. You could talk to ChatGPT and hear the most intelligent AI speaks very soon

Cool Domains for Sale!

choose.works CreditCard.rip YeuNu.com ZWVQ.com pornID.net ABP3.com choose.exchange war.money this.bid eChainBank.com Card.rip index.services XMQV.com ApexBTC.com CTRCoin.com ChainTutor.com CryptoKD.com CoinHolo.com system.money ChatTotal.com

Submit day:
Author:
Previews:
Comment:
Votes:
Sent:
Size:
Rank:

17/12/2010
Mr. J [more]
4,292
1
0
0
4.78 KBytes

Repeated Colours for HTML Elements with JavaScript

0/5 0 votes / 4,292 previews / 1 comment 17/12/2010 Sometimes in the long content, we have to make our audiences feel comfortable to read/follow. And we usually have many s...Repeated Colours for HTML Elements with JavaScript - Repeated Colours for HTML Elements with JavaScript

hoangha2010

Let's be first member to do this