Phiên bản đầy đủ: jsB@nk » Framework » MooTools » Lấy mã màu của các đối tượng web với MooTools
URL: https://www.javascriptbank.com/colours-on-page-displaying-with-mootools.html
Khi người dùng nhấn vào nút chỉ định, hiệu ứng JavaScript này sẽ thực hiện việc lấy mã màu của các đối tượng có trên trang web đã được gán trước trước đó và hiển thị ra trên các ô màu hình chữ nhật. Ý tưởng của tác giả khi xây dựng đoạn mã JavaScript này là cung cấp cho người dùng mã màu mà không cần phải xem chi tiết mã nguồn trang web.Thử thêm các hiệu ứng JavaScript khác trên jsB@nk để lấy mã màu nếu bạn đang có nhu cầu này: - JavaScript công cụ chọn màu - JavaScript công cụ chọn màu của Milonic - JavaScript chọn màu - JavaScript chọn màu cho các đối tượng
Phiên bản đầy đủ: jsB@nk » Framework » MooTools » Lấy mã màu của các đối tượng web với MooTools
URL: https://www.javascriptbank.com/colours-on-page-displaying-with-mootools.html
<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><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><!--/* 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>
/javascript/mootools.js