您的位置：首页 > Web前端 > JavaScript

JavaScript操作对象以及获取运行时的style对象

2016-01-08 17:07 696 查看

功能实现:

点击一个div可实现该div颜色的切换变换

以及div的宽高下边框的变换

点击div，使其背景色红绿交替

宽度增加5px

下边框增粗1px

代码如下：

[code]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>我的第一个网站</title>
<style type="text/css">
    div{
        width: 300px;
        height: 300px;
        border-bottom:1px solid black;
    }
    .test1{

        background: red;
    }
    .test2{

        background: green;
    }
</style>
<script type="text/javascript">

    function getStyle(obj,attr){
        return obj.currentStyle ? obj.currentStyle[attr] :getComputedStyle(obj,null)[attr];
    }

    function t(){
        var div = document.getElementsByTagName('div')[0];
        if(div.className.indexOf('test1')>=0){
            div.className = 'test2';
        }else{
            div.className = 'test1';
        }
        //alert(getStyle(div,'width'));
        //return;
        div.style.width = parseInt(getStyle(div,'width')) + 5 + 'px';
        div.style.height = parseInt(getStyle(div,'height')) + 5 + 'px';
        div.style.borderBottomWidth = parseInt(getStyle(div,'borderBottomWidth')) + 1 +'px'; 
    }
</script>
<html>
    <head>
        <body>
            <div class="test1" onclick = "t();"> 
                点击div，使其背景色红绿交替
                宽度增加5px
                下边框增粗1px
            </div>
        </body>
    </head>

</html>

涉及到的知识点：

getStyle(div,’borderBottomWidth’)得到的返回值为字符串例如： “300px”

因此需要使用parseInt(String);函数将字符串中的数字提取出来然后再进行拼接

比如需要将300px像素增加5px 操作如下:

parseInt(“300px”)+5+’px;

得到的结果为一个“305px”的字符串

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航