»
Tiếng AnhTiếng PhápTiếng Việt

In - Tô màu nền tự động cho các đối tượng HTML - JavaScriptBank.com

Phiên bản đầy đủ: jsB@nk » Biểu mẫu » Bảng » Tô màu nền tự động cho các đối tượng HTML
URL: https://www.javascriptbank.com/javascript-repeated-colours-html-elements.html

Tô màu nền tự động cho các đối tượng HTML © JavaScriptBank.comThỉnh thoảng, trong các đoạn văn dài (thường là tiểu thuyết và truyện chữ) được thể hiện trên web, chúng ta cần tạo sự dễ dàng cho người đọc để theo dõi các thông tin. Chúng ta có thể dùng nhiều cách thức khác nhau như tô sáng đoạn hiện tại khi rê chuột đến, ...Và hôm nay, jsB@nk xin giới thiệu với bạn thêm một sáng kiến nữa: đánh dấu tự động các đoạn thông tin với các dải màu (màu nền). Với đoạn mã này, chúng ta sẽ dễ dàng thực hiện được, vui lòng vào trang ví dụ JavaScript mẫu để xem.

Phiên bản đầy đủ: jsB@nk » Biểu mẫu » Bảng » Tô màu nền tự động cho các đối tượng HTML
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.  -->