js修改css时如何考虑兼容性问题es5+es6
es5的写法
var elementStyle = document.createElement('div').style
var vendor = (function(){
let transformNames = {
webkit: 'webkitTransform',
Moz: 'MozTransform',
O: 'OTransform',
ms: 'msTransform',
standard: 'transform'
}
for (let key in transformNames) {
if (elementStyle[transformNames[key]] !== undefined) {
return key
}
}
return false
})()
function prefixStyle(style) {
if (vendor === false) {
return false
}
if (vendor === 'standard') {
return style
}
return vendor + style.charAt(0).toUpperCase() + style.substr(1)
}
使用方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试es5</title>
<style>
*{
margin:0;
padding:0;
box-sizing: border-box;
}
#el{
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div id="el"></div>
<script>
var elementStyle = document.createElement('div').style var vendor = (function(){
let transformNames = {
webkit: 'webkitTransform',
Moz: 'MozTransform',
O: 'OTransform',
ms: 'msTransform',
standard: 'transform'
} for (let key in transformNames) {
if (elementStyle[transformNames[key]] !== undefined) {
return key
}
} return false
})() function prefixStyle(style) {
if (vendor === false) {
return false
} if (vendor === 'standard') {
return style
} return vendor + style.charAt(0).toUpperCase() + style.substr(1)
}
document.getElementById('el').onmouseenter=function(){
document.getElementById('el').style[prefixStyle('transform')] ='scale(1.5)'
}
document.getElementById('el').onmouseleave=function(){
document.getElementById('el').style[prefixStyle('transform')] ='scale(1)'
} </script>
</body>
</html>
es6的写法
let elementStyle = document.createElement('div').style
let vendor = (() => {
let transformNames = {
webkit: 'webkitTransform',
Moz: 'MozTransform',
O: 'OTransform',
ms: 'msTransform',
standard: 'transform'
}
for (let key in transformNames) {
if (elementStyle[transformNames[key]] !== undefined) {
return key
}
}
return false
})()
export function prefixStyle(style) {
if (vendor === false) {
return false
}
if (vendor === 'standard') {
return style
}
return vendor + style.charAt(0).toUpperCase() + style.substr(1)
}
js修改css时如何考虑兼容性问题es5+es6的更多相关文章
- 【JS新手教程】JS修改css样式的几种方法
本文试验了几种JS修改css样式的方法,方法1:元素.style.样式=样式值.方法2:元素.style.cssText=样式:样式值方法3:元素.style[样式]=样式值 .cssText这种,可 ...
- js 修改css属性值
js不能修改样式表 但是可以修改元素:比如 <div id="test" class="star-rating"></div> 对于上面 ...
- js修改css
转载请注明来源:https://www.cnblogs.com/hookjc/ <style type="text/css"> .style{font-size:9pt ...
- js控制css时注意
font-size:10px--------e.style.fontSize="10px " 属性名:font-size--------fontSize; 属性值:10px---- ...
- js修改css属性值
推荐用dom.style.setProperty('属性','属性值'); 例如: $("#id")[0].style.setProperty('margin-top','1px' ...
- JS笔记一：动态修改css样式
---恢复内容开始--- 最近在学习CSS/JS的样式,两个合学习一起学习,加深JS的书写和了解. 一.通过Javasript修改图片大小 通过函数来传递图片id,height,width,使用doc ...
- js介绍，js三种引入方式，js选择器，js四种调试方式，js操作页面文档DOM（修改文本，修改css样式,修改属性）
js介绍 js运行编写在浏览器上的脚本语言(外挂,具有逻辑性) 脚本语言:运行在浏览器上的独立的代码块(具有逻辑性) 操作BOM 浏览器对象盒子 操作DOM 文本对象 js三种引入方式 (1)行间式: ...
- javascript 修改css样式
abc.css CSS code .class1 { width:10px; background-color: red; } HTML code <!DOCTYPE ...
- 用JS控制CSS基本样式
详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcytp29 用JS控制CSS基本样式的方法 CSS code .class1 { ...
随机推荐
- Truck History - poj 1789 (Prim 算法)
Time Limit: 2000MS Memory Limit: 65536K Total Submissions: 20884 Accepted: 8075 Description Ad ...
- linux .vimrc的设置!
0.记得在配之前先下载vim.不同的版本下载vim使用不同命令 ubuntu使用sudo apt-get install vim 1.vi ~/.vimrc 打开当前用户下的vim的配置文件(修改完 ...
- JWT简介json web token bear token
, "exp": 1502360328,(相差3600s) "nbf": , "jti": "R0Gd00AvOW259LGo&q ...
- 用Jekyll搭建的Github Pages个人博客实践2
依稀记得之前访问喵神的博客很有feel 感谢喵神git上的提供的主题Vno-Jekyll. 创建代码仓库(你的用户名).github.io 将主题Vno-Jekyll下载到本地,解压到刚刚的代码仓库目 ...
- 多媒体开发之---h264格式slice_header
从Slice_Header学习H.264 写在前面: $ H.264我是结合标准和毕厚杰的书一块学的.看句法语义时最是头疼,一大堆的元素,很需要耐心.标准中在介绍某个元素的语义时,经常会突然冒 ...
- Linux下tar解压缩命令
1.打包命令: 命令格式:tar -zcvf 压缩文件名.tar.gz 被压缩文件名 可先切换到当前目录下.压缩文件名和被压缩文件名都可加入路径. 2.解包命令: 命令格式:tar -zx ...
- leetCode 57.Insert Interval (插入区间) 解题思路和方法
Insert Interval Given a set of non-overlapping intervals, insert a new interval into the intervals ...
- 数字证书转换cer---pem
下载openssl-1.0.1s 安装好openssl之后,进入openssl目录: 输入openssl命令,即进入命令模式: 先将要转换的cer证书也放到openssl目录下面,然后执行以下 ...
- OKR与KPI管理的区别与联系
OKR是一种新兴的管理体系,最近几年被引进中国.由于在IT.互联网.金融.游戏等知识密集型企业中有着显著的效果,得到中国企业的认可. OKR是英文Objectives & Key Result ...
- nginx学习之压缩解压篇（七）
1.简介 压缩响应可以减少传输数据的大小,节省带宽.但过多的压缩会造成很大的处理开销.在发送给客户端之前,nginx会对响应做压缩,但是如果后端服务器已经 压缩过了,nginx就不再压缩. 2.开启压 ...