操做對象以及獲取內存中的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>

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

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

// // 注意這裏使用的是去掉-而且把字母大寫

//封裝一個函數，獲取當前內存中的style

function getType(obj,attr){

//爲只讀

// obj.currentStyle[attr]:在IE中獲取當前的style屬性

// window.getComputedStyle(obj,null)[attr];在其餘瀏覽器中獲取屬性

return obj.currentStyle?obj.currentStyle[attr]:window.getComputedStyle(obj,null)[attr];

}

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";

alert(getType(test,'width'));

c++;

if(c%2==0){

test.style.background="red";

}

else test.style.background="blue";

}

</script>

</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

操做對象 以及獲取內存中的style

操做對象以及獲取內存中的style