在开发中像需要动态改变css属性值时需要在html中动态添加样式
//浏览器几种主要内核
function CompatibleCSS(prop){
const prefixes = ['Moz', 'Webkit', 'O', 'ms'];
//获取浏览器带前缀属性
const style = window.document.documentElement.style;
//构造各内核属性
for (let i = 0; i < prefixes.length; i++) {
const key = browserPrefixToKey(prop, prefixes[i]);
if (key in style) {
//获取到前缀
//return prefixes[i];
return key ;
}
}
//构造方法 str为样式
function kebabToTitleCase(str) {
let out = '';
let shouldCapitalize = true;
for (let i = 0; i < str.length; i++) {
if (shouldCapitalize) {
out += str[i].toUpperCase();
shouldCapitalize = false;
} else if (str[i] === '-') {
shouldCapitalize = true;
} else {
out += str[i];
}
}
return out;
}
//prop为样式 prefix为前缀
function browserPrefixToKey(prop, prefix) {
return prefix ? prefix + kebabToTitleCase(prop) : prop;
}
}
CompatibleCSS("transform");