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

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

2017-02-18 22:35 435 查看

功能实现:

点击一个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”的字符串

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

标签：

相关文章推荐

新的分享

章节导航