javasc之动画

1.获得样式

　　通过行内获得样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>获得计算后样式</title>
    <style type="text/css">
        #wrap{
            width: 200px;
            height: 200px;
            background:#ccc;
            position: absolute;
            left: 50px;
        }
    </style>
</head>
<body>
    <div id="wrap"></div>
</body>    
</html>
<script type="text/javascript">
    //无论什么情况下从页面或者标签中获得的内容,都是字符串类型
    //获得当前标签的当前left和top值
    var wrap = document.querySelector("#wrap");
    //通过行间样式获得
    var left = wrap.style.left;
    var realLeft = Number(left.replace("px",""));
    console.log(typeof realLeft);
    console.log(realLeft);
</script>

之所以left属性值为零,因为是通过行内样式获得,故而不能获得id样式,所以要在div标签内添加行内样式属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>获得计算后样式</title>
    <style type="text/css">
        #wrap{
            width: 200px;
            height: 200px;
            background:#ccc;
            position: absolute;
        }
    </style>
</head>
<body>
    <div id="wrap" style="left: 100px"></div>
</body>    
</html>
<script type="text/javascript">
    //无论什么情况下从页面或者标签中获得的内容,都是字符串类型
    //获得当前标签的当前left和top值
    var wrap = document.querySelector("#wrap");
    //通过行间样式获得
    var left = wrap.style.left;
    var realLeft = Number(left.replace("px",""));
    console.log(typeof realLeft);
    console.log(realLeft);
</script>

2. 获得计算后的内联样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>获得计算后样式</title>
    <style type="text/css">
        #wrap{
            width: 200px;
            height: 200px;
            background:#ccc;
            position: absolute;
            /*left: 50px;*/
        }
    </style>
</head>
<body>
    <div id="wrap" style="left: 100px"></div>
</body>    
</html>
<script type="text/javascript">
    //获得计算后样式
    //既可以获得行间样式,也可以获得内联样式
    var style = getComputedStyle(wrap);
    var left = style.left;
    console.log(left);
</script>

获得计算后的行内样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>获得计算后样式</title>
    <style type="text/css">
        #wrap{
            width: 200px;
            height: 200px;
            background:#ccc;
            position: absolute;
            left: 50px;
        }
    </style>
</head>
<body>
    <div id="wrap"></div>
</body>    
</html>
<script type="text/javascript">
    //获得计算后样式
    //既可以获得行间样式,也可以获得内联样式
    var style = getComputedStyle(wrap);
    var left = style.left;
    console.log(left);
</script>

3.获得计算后的样式方法二

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>获得计算后样式</title>
</head>
<body>
    <div id="wrap" style="left: 50px"></div>
</body>    
</html>
<script type="text/javascript">
    var wrap = document.querySelector("#wrap");
    //obj就是标签名,name是属性名
    function getCss(obj,name){
        if(obj.objcurrentStyle){
            return obj.currentStyle[name];
        }else{
            return getComputedStyle(obj)[name];
        }
    }
    var value = getCss(wrap,"left");
    console.log(value);
</script>

4.属性名为变量名

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>属性为变量名</title>
</head>
<body>
    <div id="wrap"></div>    
</body>
<script type="text/javascript">
    var wrap = document.querySelector("#wrap");
    wrap.sex = "男";
    wrap.blood = 100;

    var name = "hello";
    //中括号中原为属性名,这里是变量
    wrap[name] = "名字";
    console.log(wrap);
</script>
</html>
<script type="text/javascript">
    
</script>

打印结果应该是wrap.name = "名字"

5.获得样式总结

　　1.获得行间样式:标签.style.样式名

　　2.获得计算后样式:getComputedStyle(标签).样式名-->针对现代浏览器

　　　　　　　　　　标签.currentStyle.样式名-->针对IE浏览器

　　3.属性名如果是变量,name我们需要通过:标签[变量]

6.样式获得

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>样式获得</title>
    <style type="text/css">
    #wrap{
        width: 100px;
        height: 100px;
        border: 1px solid red;
        position: absolute;
        left: 300px;
        top: 400px;
    }
    </style>
</head>
<body>
    <div id="wrap"></div>
</body>
</html>
<script type="text/javascript">
    var wrap = document.querySelector("#wrap");
    //1.获得left,直接获得数字,获得绝对定位的left
    var left = wrap.offsetLeft;
    console.log(left);
    //2.获得top值(注意,变量名不能为top)
    var myTop = wrap,offsetTop;
    console.log(myTop);
    //3.offsetWidth
    var width = wrap.offsetWidth;
    console.log(width);
    //4.获得高度
    var height = wrap.offsetHeight;
    console.log(height);
</script>

总结:
offset开头的只有left top width height
得到的结果只能是数字
不能赋值

注意:如果标签为display:none,那么就不能获得任何值(值为0),只能通过getCss函数获得