Tool.css是一個輕量級的CSS庫,提供了一些常用的樣式和實用工具類,可以快速幫助開發者搭建網頁。Tool.js則是Tool.css的配套Javascript庫,提供了諸多優秀的DOM操作方法和一些實用的功能函數。
// Tool.css .tool-bg-blue { background-color: blue; } .tool-text-hide { overflow: hidden; text-indent: 100%; white-space: nowrap; } .tool-dropdown { display: none; position: absolute; top: 100%; left: 0; z-index: 999; } .tool-dropdown.show { display: block; } // Tool.js var $ = function(selector) { return document.querySelector(selector); } var $$ = function(selector) { return document.querySelectorAll(selector); } $.hasClass = function(ele, cls) { return ele.className.indexOf(cls) >-1; } $.addClass = function(ele, cls) { if (!$.hasClass(ele, cls)) { ele.className += ' ' + cls; } } $.removeClass = function(ele, cls) { if ($.hasClass(ele, cls)) { ele.className = ele.className.replace(cls, '').trim(); } } $.toggleClass = function(ele, cls) { if ($.hasClass(ele, cls)) { $.removeClass(ele, cls); } else { $.addClass(ele, cls); } }
使用Tool.css和Tool.js可以快速實現網頁元素的樣式調整和DOM操作。此外,Tool.css具有較高的兼容性和易用性,還能通過自定義變量和函數,滿足開發者更多的需求。