视觉工作室代码

简介

视觉工作室代码是一个帮助设计师简化前端开发流程的工具库。它提供了丰富的通用css样式模板和JavaScript函数，可以用于快速构建网站和应用程序。

代码片段

CSS 部分

/* 重置默认样式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 文字省略号 */
.ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 清除浮动 */
.clearfix::after {
  content: '';
  display: block;
  clear: both;
}

/* 绝对定位居中 */
.position-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* flex布局 */
.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.flex-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

JS 部分

/* 判断变量是否是数组类型 */
function isArray(variable) {
  return Object.prototype.toString.call(variable) === '[object Array]';
}

/* 判断变量是否是对象类型 */
function isObject(variable) {
  return Object.prototype.toString.call(variable) === '[object Object]';
}

/* 简化获取 DOM 元素的操作 */
function $(selector) {
  return document.querySelector(selector);
}

function $$(selector) {
  return document.querySelectorAll(selector);
}

/* 判断浏览器是否支持某个 CSS 属性 */
function isSupportCss(property) {
  return property in document.documentElement.style;
}

/* 判断某个 DOM 元素是否包含某个 class */
function hasClass(ele, cls) {
    return !!ele.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
}

/* 为某个 DOM 元素添加 class */
function addClass(ele, cls) {
    if (!hasClass(ele, cls)) ele.className += ' ' + cls;
}

/* 为某个 DOM 元素删除 class */
function removeClass(ele, cls) {
    if (hasClass(ele, cls)) {
        var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
        ele.className = ele.className.replace(reg, ' ');
    }
}

以上是部分常用的 CSS 样式和 JavaScript 函数，视觉工作室代码还包括其他很多实用的工具和函数，可以帮助你更高效地进行前端开发。