»
AnglaisFrançaisVietnamien

Imprimer - Couleurs-sur-Page Affichage avec MooTools - JavaScriptBank.com

Version complète: jsB@nk » Framework » MooTools » Couleurs-sur-Page Affichage avec MooTools
URL: https://www.javascriptbank.com/colours-on-page-displaying-with-mootools.html

Couleurs-sur-Page Affichage avec MooTools © JavaScriptBank.comLorsque les utilisateurs cliquent sur un bouton sp?cifi?, cet exemple de code JavaScript obtenir des couleurs de tous les ?l?ments HTML avec la couleur pr?d?finie attributs puis remplissez ces couleurs dans de nombreux petits rectangles L'auteur a construit cette s?lecteur de couleur JavaScript avec l'id?e d'offrir la couleur des visiteurs de n'importe quel ?l?ment HTML sans rechercher le code source des pages web
Color Picker Tigra
? S?lecteur de couleur Milonic DHTML
? Color Picker JSwitch
? S?lecteur de couleurs HTML 1.0

Version complète: jsB@nk » Framework » MooTools » Couleurs-sur-Page Affichage avec MooTools
URL: https://www.javascriptbank.com/colours-on-page-displaying-with-mootools.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*/.dcolor  {  height:40px;}.dtext {  }.dwrapper {  width:100px;  float:left;  padding:10px;  margin:0 20px 20px 0;  border:1px solid #ccc;}</style>


JavaScript
<script type="text/javascript" src="/javascript/mootools.js"></script><script type="text/javascript">// Created by: David Walsh | http://eriwen.com/css/color-palette-with-css-and-moo/// This script downloaded from www.JavaScriptBank.com//once the dom is readywindow.addEvent('domready', function() {//do it!$('get-colors').addEvent('click', function() {//starting the colors arrayvar colors = [];var disallows = ['transparent'];//for every element$$('*').each(function(el) {//record colors!colors.include(el.getStyle('color'));colors.include(el.getStyle('background-color'));el.getStyle('border-color').split(' ').each(function(c) {colors.include(c);});});//sort the colorscolors.sort();//empty wrapper$('colors-wrapper').empty();//for every color...colors.each(function(val,i) {//if it's goodif(!disallows.contains(val)){//create wrapper divvar wrapper = new Element('div', {'class':'dwrapper'});//create color div, injectvar colorer = new Element('div', {'class':'dcolor','style': 'background:' + val});colorer.inject(wrapper);//alert(val);//create text div, injectvar texter = new Element('div', {'class':'dtext','text':val});texter.inject(wrapper);//inject wrapperwrapper.inject($('colors-wrapper'));}});});});</script>


HTML
<!--/*     This script downloaded from www.JavaScriptBank.com     Come to view and download over 2000+ free javascript at www.JavaScriptBank.com*/--><input type="button" id="get-colors" value="Get Colors" class="button"><br><br><br><div id="colors-wrapper"></div><br clear="all"><div style="text-align: left; width: 70%;"><p>Ma quande lingues coalesce. <span style="color: #279F37;">Li nov lingua franca va esser</span> plu simplic e regulari. Lorem ipsum dolor sit amet, <span style="color: #9F6827;">consectetuer adipiscing elit, sed diam nonummy</span> nibh euismod tincidunt ut <span style="color: #BFB00B;">laoreet dolore magna aliquam erat volutpat</span>.</p></div>


Files
/javascript/mootools.js