操做对象以及获取内存中的style

时间 2019-11-24

标签对象以及获取内存 style 繁體版

原文原文链接

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">html

<html xmlns="http://www.w3.org/1999/xhtml">c++

<head>浏览器

<title>操做对象</title>函数

</head>xml

<body>htm

<div id="header" onclick="toggle()" style="width:500px;height:200px ;border-Bottom:solid 1px black;background:yellow">实现点击红绿交替</div>对象

</body>ip

// var s=document.getElementById("header");

// s.style.borderTop="solid 10px green";

// // 注意这里使用的是去掉-而且把字母大写

var c=1;

function toggle(){

var test=document.getElementById("header");

// parseInt转化为整数

var a=parseInt(test.style.width);

var b=parseInt(test.style.height);

test.style.borderBottomWidth=parseInt(test.style.borderBottomWidth)+2+"px";

test.style.width=a+100+"px";

test.style.height=b+100+"px";

c++;

if(c%2==0){

test.style.background="red";

}

else test.style.background="blue";

}

</script>

</html>

/***************************/

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

</head>

<body>

<div id="header" onclick="toggle()" style="width:500px;height:200px ;border-Bottom:solid 1px black;background:yellow">实现点击红绿交替</div>

</body>