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

最新推荐文章于 2022-09-25 10:37:55 发布

chance2015

最新推荐文章于 2022-09-25 10:37:55 发布

阅读量2.6k

点赞数

分类专栏： JavaScript_DOM编程 JavaScript学习大全文章标签： javascript

本文链接：https://blog.csdn.net/chance2015/article/details/50484218

版权

JavaScript_DOM编程同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

JavaScript学习大全

8 篇文章 4 订阅

订阅专栏

功能实现:
点击一个div可实现该div颜色的切换变换
以及div的宽高下边框的变换

点击div，使其背景色红绿交替
宽度增加5px
下边框增粗1px
代码如下：

<!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”的字符串

chance2015

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript操作对象以及获取运行时的style对象

功能实现: 点击一个div可实现该div颜色的切换变换以及div的宽高下边框的变换点击div，使其背景色红绿交替宽度增加5px 下边框增粗1px 代码如下：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><meta http-equiv="Content
复制链接

扫一扫