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 { ...
随机推荐
- 详解path和classpath的区别
详解path和classpath的区别 path的作用 path是系统用来指定可执行文件的完整路径,即使不在path中设置JDK的路径也可执行JAVA文件,但必须把完整的路径写出来,如C:\Progr ...
- ADC 分辨率和精度的区别（转载）
转自:http://hi.baidu.com/jnjypbpuhkbajmq/item/8a6b472ae86dcc69469962b7 分辨率和精度这两个,经常拿在一起说,才接触的时候经常混为一谈. ...
- saltstack之软件管理
1.installed安装软件包 例: 安装NFS /srv/salt/pkg/nfs.sls nfs: pkg.installed: - pkgs: - nfs-utils 在命令行执行如下 sal ...
- _DataStructure_C_Impl:图的最小生成树
#include<stdio.h> #include<stdlib.h> #include<string.h> typedef char VertexType[4] ...
- C# RangeHelper
/// <summary> /// Range Helper /// </summary> /// <typeparam name="T">&l ...
- POJ 1584 A Round Peg in a Ground Hole【计算几何=_=你值得一虐】
链接: http://poj.org/problem?id=1584 http://acm.hust.edu.cn/vjudge/contest/view.action?cid=22013#probl ...
- Learning string similarity measures for gene/protein name dictionary look-up using logistic regression
Yoshimasa Tsuruoka1,*, John McNaught1,2, Jun’ichi Tsujii1,2,3 and Sophia Ananiadou1,2 1 School of Co ...
- iOS 开发与H5交互(JavaScriptCore框架的使用)
现在的iOS项目中嵌入了越来越多的Web界面,当然是为了方便,那么为了迎合这一趋势,作为iOS开发程序员,我们必须要了解怎么样用OC去和这些Web界面进行交互.这里介绍的是JavaScriptCore ...
- Java语言平台
J2SE(Java 2 Platform Standard Edition) 标准版 开发普通桌面和商务应用程序提供的解决方案,该技术体系是下面两者的基础,可以完成一些桌面应用程序的开发 J2ME(J ...
- python网络爬虫之scrapy 调试以及爬取网页
Shell调试: 进入项目所在目录,scrapy shell “网址” 如下例中的: scrapy shell http://www.w3school.com.cn/xml/xml_syntax.as ...