获取非行间样式函数及多物体动画（原生js写法）
Posted johnny-cli
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了获取非行间样式函数及多物体动画（原生js写法）相关的知识，希望对你有一定的参考价值。
//非行间样式函数
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
text-align: center;
}
</style>
</head>
<body>
<input type="button" value="style" id="btn"/>
<div id="div1">你好</div>
<!--//获取非行间css样式的函数-->
<script>
function getStyle(obj, attr) {//获取非行间样式，obj是对象，attr是值
if (obj.currentStyle) {//针对ie获取非行间样式
return obj.currentStyle[attr];
} else {
return getComputedStyle(obj, false)[attr];//针对非ie
}
}
//为对象写入/获取css样式
function css(obj, attr, value) {//对象，样式，值，传两个参数的时候为获取样式，3个是设置样式
if (arguments.length == 2) {
return getStyle(obj, attr)
} else {
if (arguments.length == 3) {
obj.style[attr] = value;
}
}
}
window.onload = function () {
var oDiv = document.getElementById(‘div1‘);
var oBtn = document.getElementById(‘btn‘);
oBtn.onclick = function () {
alert(getStyle(oDiv, ‘height‘));
css(oDiv, ‘background‘, ‘green‘);
alert(css(oDiv, "width"));
}
}
</script>
</body>
</html>
//多物体动画（含透明度的动画）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>多物体复杂运动带透明度</title>
<style>
*{
margin:0;
padding:0;
font-size:12px;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
fieldset, img {
border: 0
}
address, caption, cite, code, dfn, em, strong, th, var {
font-style: normal;
font-weight: normal
}
ol, ul {
list-style: none
}
caption, th, td {
text-align: center
}
h1, h2, h3, h4, h5, h6 {
font-size: 100%;
font-weight: normal
}
q:before, q:after {
content: ‘‘
}
abbr, acronym {
border: 0
}
.odiv {
position: relative;
}
.odiv ul li {
width: 200px;
height: 100px;
background: yellow;
margin-bottom: 20px;
border: 2px solid #000;
}
#li1 {
opacity: 0.3;
filter: alpha(opacity:30);
}
</style>
</head>
<body>
<div id="odiv" class="odiv">
<ul>
<li id="li1"></li>
<li id="li2"></li>
<li id="li3"></li>
</ul>
</div>
<script>
window.onload= function () {
var li1=document.getElementById(‘li1‘);
var li2=document.getElementById(‘li2‘);
var li3=document.getElementById(‘li3‘);
li1.onmouseover= function () {
startMov(this,100,‘opacity‘);
};
li1.onmouseout= function () {
startMov(this,30,‘opacity‘)
};
li2.onmouseover=function(){
startMov(this,200,‘height‘)
};
li2.onmouseout= function () {
startMov(this,100,‘height‘)
};
li3.onmouseover= function () {
startMov(this,400,‘width‘)
};
li3.onmouseout= function () {
startMov(this,200,‘width‘)
};
//给当前的三个对象分别添加定时器timer
li1.timer=null;
li2.timer=null;
li3.timer=null;
};
//移入移出所触发的动画函数
function startMov(obj,itarget,attr){
clearInterval(obj.timer);//执行前先清空当前的定时器
//再给当前对象添加定时器
obj.timer=setInterval(function () {
var icur=0;
if(attr==‘opacity‘){
icur=Math.round(parseFloat(getStyle(obj,attr))*100);//计算机在计算小数的时候往往是不准确的
}else{
icur=parseInt(getStyle(obj,attr));
}
var speed=0;
speed=(itarget-icur)/8;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
if(icur==itarget){
clearInterval(obj.timer);
}else{
if(attr==‘opacity‘){
obj.style.filter=‘alpha(opacity:‘+(icur+speed)+‘)‘;
obj.style.opacity=(icur+speed)/100;
}else {
obj.style[attr]=icur+speed+‘px‘;
}
}
},30);
}
//获取非行间样式
function getStyle(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
}else {
return getComputedStyle(obj,false)[attr];
}
}
</script>
</body>
</html>
以上是关于获取非行间样式函数及多物体动画（原生js写法）的主要内容，如果未能解决你的问题，请参考以下文章