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

最新推荐文章于 2025-09-08 23:34:59 发布

weixin_34260991

最新推荐文章于 2025-09-08 23:34:59 发布

阅读量90

点赞数

CC 4.0 BY-SA版权

文章标签： xhtml python

原文链接：https://my.oschina.net/u/2532163/blog/656612

本文介绍了一个简单的网页元素点击效果实现方案，通过JavaScript控制元素的尺寸、边框宽度及背景颜色变化，实现交互式视觉效果。

2019独角兽企业重金招聘Python工程师标准>>>

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

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

<head>

<title>操作对象</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<meta name="description" content="布尔教育 http://www.itbool.com" />

</head>

<body>

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

</body>

<script>

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

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

<head>

<title>操作对象</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<meta name="description" content="布尔教育 http://www.itbool.com" />

</head>

<body>

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

</body>

<script>

// 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>

转载于:https://my.oschina.net/u/2532163/blog/656612

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。