用户投稿作者:pratnket
版本:2017_Var1
javascript系列课程Days-1
javascript系列课程Days-2
嗯..无聊写的...一般来说...有jQuery的CSS功能了
使用方式如下
$(#demo1).css("color:red");纯粹写一个不依赖的...jQuery
使用方式如下
Style.search('ID或Class').val({ Keys1:"字串", Keys2:"字串", });一般来说写Style大部分都是要应急 OR 不懂继承的 CSS 常干的事...
例如5:30下班
他给你5:15分时给你任务...
嗯...我就写Style里面去噜
毕竟网页交接都是看前辈的文件(还有一堆CSS地狱坑)<==没人交接...
我也是慢慢学的
-获取DOM对象
可以干很多事
AJAX
输入框失去焦点变色
动画(一闪一闪亮晶晶...)
寄信电子报
表单验证
嗯?睡觉...
明天有空在写详细介绍
首页
A页<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Style.JS</title><style>* {margin:0; padding:0;}body {background: #CCC;}::-moz-selection{ background: #FF5E99; color:#fff; text-shadow: none; }::selection { background:#FF5E99; color:#fff; text-shadow: none; } .wrapper {width: 710px;margin-left: auto;margin-right: auto;margin-top: 20px;background: #FFFFFF;padding: 50px;}.code {background: #f8f8f8;border: 1px solid #ccc;margin-bottom: 2em;padding: 10px;}</style></head><body><div class="wrapper"><header><h1>Style.js</h1><h4>作者:pratnket</h4><h4>版本:2017_Var1</h4><br><p>A simple plug to divide something by JavaScript,no need jQuery.</p><p>一个轻量级的JavaScript插件，可以通过这个插件做style，单词或句子进行变化，无需依赖jQuery。</p><br></header><article><h1 align=center>测试字串</h1><div class="code" align=center><h1 id="demo1">ColorDivide.listen('#demo1')</h1></div><h1 align=center>测试字串</h1><div class="code" align=center><h1 id="demo1">ColorDivide.</h1><h1 id="demo2">config({color_bsdic:{ H:60,S:90,L:30 }}).</h1><h1 id="demo2">listen('#demo2');</h1></div></article></div><script src="Style.js"></script><script>Style.search('#demo1').val({color:"red",width:"40px",});Style.search('#demo2').val({border:"10px",clear:"both"});</script></body></html>JS页
B页(function () {var options = {splitter: 'Default',enemy:''}//helpervar f_keys = function(obj){var keys = new Array()Object.keys(arguments[i]).forEach(function(Value) {keys.push(Value);});return keys}var f_value = function(obj){var value = new Array()Object.values(arguments[i]).forEach(function(Value) {value.push(Value);})return value}//APIvar api = {config: function (opts) {if(!opts) return options;for(var key in opts) {options[key] = opts[key];}return this;},search: function search(elem) {if (typeof elem === 'string') {var elems = document.querySelectorAll(elem),i = elems.length;while (i--) {search(elems[i]);}options.enemy = elems;return this;}return this;},val: function val() {i = arguments.length;while (i--) {if (typeof arguments [i]=== "object") {j = options.enemy.length;while (j--) {keys = f_keys(arguments [i]);value = f_value(arguments [i]);}}}i = arguments.length;j = options.enemy.length;while (j--) {x = options.enemy[j] ;k = keys.length;while (k--) {x.style.cssText += keys[k] +':'+ value[k] + ';';console.log("Keys:" + keys[k] + " Value:" + value[k]);}}return this;}}this.Style = api;})();
微信扫一扫打赏
支付宝扫一扫打赏
