@ivujs/i-utils
Version:
前端模块化 JavaScript 工具库
133 lines (130 loc) • 3.19 kB
JavaScript
;
/**
* @module 浏览器Dom
*/
/* Class操作 */
/**
* 判断元素包含某个类名
* @param {HTMLElement} elem 元素
* @param {string} className 类名
* @return {boolean} 返回true和false
*/
function hasClass(elem, className) {
return elem.className.indexOf(className) > 0;
}
/**
* 元素添加类名
* @param {HTMLElement} elem 元素
* @param {string} className 类名
*/
function addClass(elem, className) {
if (!hasClass(elem, className)) {
elem.className += " " + className;
}
}
/**
* 元素删除类名
* @param {HTMLElement} elem 元素
* @param {string} className 类名
*/
function removeClass(elem, className) {
if (hasClass(elem, className)) {
elem.className = elem.className.replace(new RegExp(className, "gm"), "");
}
}
/**
* 元素替换类名
* @param {HTMLElement} elem 元素
* @param {string} newClassName 新的类名
* @param {string} oldClassName 被替换掉的旧类名
*/
function replaceClass(elem, newClassName, oldClassName) {
removeClass(elem, oldClassName);
addClass(elem, newClassName);
}
/* Style操作 */
/**
* 添加元素的style样式
* @param {HTMLElement} elem 元素
* @param {Object} styles 样式属性集合
*/
function addStyle(elem, styles = {}) {
if (!elem)
return;
for (const [key, value] of Object.entries(styles)) {
elem.style.setProperty(key, value);
}
}
/**
* 获取元素的style样式
* @param {HTMLElement} elem 元素
* @param {string} name 属性
* @returns {string|undefined} 返回样式的值
*/
function getStyle(elem, name) {
if (!elem)
return;
return elem.style.getPropertyValue(name);
}
/**
* 删除元素的style样式
* @param {HTMLElement} elem 元素
* @param {string} name 属性
*/
function removeStyle(elem, name) {
if (!elem)
return;
elem.style.removeProperty(name);
}
/* Html转码 */
/**
* html标签转义
* @param {string} htmlStr html字符串
* @returns {string} 返回转义后的字符串
*/
function htmlEncode(htmlStr) {
const temp = {
"<": "<",
">": ">",
"&": "&",
"(": "(",
")": ")",
"/": "/",
" ": " ",
'"': """,
"'": "'",
};
return htmlStr.replace(/[<>&|()\/ '"]/g, function (c) {
return temp[c];
});
}
/**
* html标签解码
* @param {string} htmlStr html字符串
* @returns {string} 返回解析后的字符串
*/
function htmlDecode(htmlStr) {
const temp = {
"<": "<",
">": ">",
"&": "&",
"(": "(",
")": ")",
"/": "/",
" ": " ",
""": '"',
"'": "'",
};
return htmlStr.replace(/(<|>|&|(|)|/| |"|')/gi, function (all, t) {
return temp[t];
});
}
exports.addClass = addClass;
exports.addStyle = addStyle;
exports.getStyle = getStyle;
exports.hasClass = hasClass;
exports.htmlDecode = htmlDecode;
exports.htmlEncode = htmlEncode;
exports.removeClass = removeClass;
exports.removeStyle = removeStyle;
exports.replaceClass = replaceClass;