javasc之动画

佚名 6年前 (2019-05-10) 随笔 1512人围观抢沙发百度已收录

1.获得样式

SRE实战互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。

　　通过行内获得样式

<!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>