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 { ...
随机推荐
- homebrew可以管理众多开源软件的安装和卸载
通过homebrew可以管理众多开源软件的安装和卸载. 参考https://github.com/mxcl/homebrew/wiki 1. 安装: ruby -e "$(curl -fsS ...
- Vim使用技巧（1） -- 普通模式技巧 【持续更新】
直观的来一张键盘图先 符号快捷键 . //重复上次修改 ^ //光标快速跳转到当前行开头 $ //光标快速跳转到当前行结尾 f{char} //光标快速跳转到当前行下一个{char}字符,{char} ...
- pycharm中不能安装bs4的解决方案
首先:什么Beautiful Soup? Beautiful Soup 是一个可以从HTML或XML文件中提取数据的Python库.它能够通过你喜欢的转换器实现惯用的文档导航,查找,修改文档的方式.B ...
- Eclipse 中svn的合并与同步
Eclipse 中svn的合并与同步: 1. 从主干拉取到分支: 然后一直下一步,到完成就OK了. 2. 从分支代码合并到主干: 2.1.先将本地需要提交更新的代码提交更新到svn分支去 2.2. ...
- springboot工程的结构
1 springboot的工程结构是什么 就是我们组织springboot工程时遵循的代码的目录结构. 2 spring initializr创建的工程的目录结构 源码目录:src/main/java ...
- iOS11 push控制器tabbar上移问题
解决方法 - (void)pushViewController:(UIViewController *)viewController animated:(BOOL)animated { // 如果有大 ...
- Java语言实现简单FTP软件------>源码放送(十三)
Java语言实现简单FTP软件------>FTP协议分析(一) Java语言实现简单FTP软件------>FTP软件效果图预览之下载功能(二) Java语言实现简单FTP软件----- ...
- 我的设计模式学习笔记------>单例模式(Singleton)
一.前言 有些时候,允许自由创建某个类的实例是没有意义,还可能造成系统性能下降(因为创建对象所带来的系统开销问题).例如整个Windows系统只有一个窗口管理器,只有一个回收站等.在Java EE应用 ...
- [iOS]通过JS调用iOS函数时的URL编码问题
在前面的文章:[iOS]在WebApp中怎样使用JS调用iOS的函数 中,提到了怎样使用JS通过改动URL调用iOS的内部函数. 当中会遇到一个问题,就是编码问题.比方通过URL调用弹窗,在里面写上内 ...
- IntelliJ IDEA（2017）安装和破解（转发）
IntelliJ IDEA(2017)安装和破解 IDEA 全称 IntelliJ IDEA,是Java语言开发的集成环境,IntelliJ在业界被公认为最好的java开发工具之一,尤其在智能代码助手 ...