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 { ...
随机推荐
- spring roo反向工程
1.创建spring roo工程 2.在数据库中创建数据库feedback_schema,再创建几张表 3.创建连接数据库 persistence setup --provider HIBER ...
- rsync的介绍及参数详解，配置步骤，工作模式介绍
rsync的介绍及参数详解,配置步骤,工作模式介绍 rsync是类unix系统下的数据镜像备份工具.它是快速增量备份.全量备份工具. Sync可以远程同步,支持本地复制,或者与其他SSH.rsync主 ...
- 产生n个数全排列的算法
给定n个数{1...n},如何给出这n个数的全排列呢? 给定一个整数k,我们给它一个向左或向右的方向,k(->)或者k(<-),我们说k是可以移动的,如果它的方向指向一个相邻的比它小的数, ...
- wordpress 获取分类ID，分类标题，分类描述，分类链接url函数
get_cat_ID() 根据分类名称获取分类ID ///// get_cat_name() 根据分类ID获取分类名称 用法:<?phpget_cat_ID( $cat_name ...
- mybatis 视频总结
[说明]mabatis卡住了,理解的不深,配置文件的格式太多看不懂(除了连接数据库的部分),听说还可以和log4j集成,怎么个方法 一:今日完成 1)一些语言细节和操作细节 比如在servlet里面操 ...
- 【BZOJ4320】ShangHai2006 Homework 分段+并查集
[BZOJ4320]ShangHai2006 Homework Description 1:在人物集合 S 中加入一个新的程序员,其代号为 X,保证 X 在当前集合中不存在. 2:在当前的人 ...
- 序列DP(输出有要求)
DP Time Limit:10000MS Memory Limit:165888KB 64bit IO Format:%lld & %llu Submit Status De ...
- 在fc6上搭tftpd
公司的开发环境依然停留在fc6上,,,,对..很旧,旧到想死. 我在没有进一步熟悉ubuntu的基础上,为了保持ABI一致. 只能依旧在FC6 上开发. 可是现在发现开发完成,我要在fc6上文件到wi ...
- Netty Redis 亿级流量 高并发 实战 （长文 修正版）
目录 疯狂创客圈 Java 分布式聊天室[ 亿级流量]实战系列之 -30[ 博客园 总入口 ] 写在前面 1.1. 快速的能力提升,巨大的应用价值 1.1.1. 飞速提升能力,并且满足实际开发要求 1 ...
- javascript中apply和call的区别
请补充 136页 pdf 高级javascript设计