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 { ...
随机推荐
- 【JMeter4.0学习（八）】之断言
目录 响应断言 一.响应断言 1.添加线程组 2.添加HTTP请求默认值 3.添加HTTP请求1 4.先运行“HTTP请求1”,查看结果树的“取样器结果.请求.响应数据” ①取样器结果 ②请求 ③响应 ...
- Huffman编码（Huffman树）
[0]README 0.1) 本文总结于 数据结构与算法分析, 源代码均为原创, 旨在 理解 "Huffman编码(Huffman树)" 的idea 并用源代码加以实现: 0.2) ...
- git add -A使用说明
git help add -A, --all Like -u, but match <filepattern> against files in the workin ...
- 很全的php数组操作方法
一.数组操作的基本函数 数组的键名和值 array_values($arr);获得数组的值 array_keys($arr);获得数组的键名 array_flip($arr);数组中的值与键名互换(如 ...
- Win7系统CMD命令提示符输入中文变乱码怎么办
Win7系统下经常使用CMD命令提示符进行很多操作,发现Win7旗舰版系统在CMD命令提示符不能输入文字,输入的中文字都变成乱码,这是怎么回事呢?本文将提供Win7系统CMD命令提示符输入中文变乱码的 ...
- Linux下apache安装php
php 1.下载解压 cd /usr/local/src wget http://mirrors.sohu.com/php/php-5.6.9.tar.gz tar zxvf php-5.6.9.ta ...
- CF:Problem 426B - Sereja and Mirroring 二分或者分治
这题解法怎么说呢,由于我是把行数逐步除以2暴力得到的答案,所以有点二分的意思,可是昨天琦神说是有点像分治的意思.反正总的来说:就是从大逐步细化找到最优答案. 可是昨晚傻B了.靠! 多写了点东西,然后就 ...
- 首页底部菜单FragmentTabHost的使用
一般现在的菜单都是底部FragmentTabHost,切换Fragment来实现的,今天我们就使用这个来看看如何实现的 首先是布局文件 <?xml version="1.0" ...
- Card Collector
In your childhood, do you crazy for collecting the beautiful cards in the snacks? They said that, fo ...
- java并发编程基础---Sky
1.线程及启动和终止 1.1 线程 -进程/优先级 操作系统调度的最小单元是线程,线程是轻量级进程. 线程优先级由setPriority(int)方法来设置,默认优先级是5,等级1~10.等级越高分的 ...