获取窗口属性获取dom尺寸脚本化CSS(下) 有源码可以随意进行练习哈太棒了一起加油一起成长

最新推荐文章于 2024-08-07 22:01:13 发布

小白追梦

最新推荐文章于 2024-08-07 22:01:13 发布

阅读量72

点赞数

分类专栏： JS dom 文章标签： javascript

本文链接：https://blog.csdn.net/weixin_43815680/article/details/106433010

版权

JS 同时被 2 个专栏收录

23 篇文章 0 订阅

订阅专栏

dom

5 篇文章 0 订阅

订阅专栏

1、写东西刺激大脑的记忆能力尽量不要用纸写电子化防止丢了
脚本化CSS
读写 css div.style.width（也是写的唯一操作）可读写行间样式无兼容性问题碰到float这样的保留字属性前面加上css
注意 background - color 需要写成小驼峰方式 div.style.backgroundColor
写入的值一定为字符串格式

在这里插入图片描述

2、比较特殊在上面写width 下面不写这个

会加到这个地方

3、

4、
查询计算机样式 IE8 及 IE8 以下不兼容 window.getComputedStyle(div, null)[prop]

计算样式只读
返回的计算样式的值都是绝对值没有相对单位

IE及IE8 以下 div.currentStyle.width 只读返回的计算样式值就是原值

伪元素的操作
在这里插入图片描述

当我点击 div的时候  让伪元素  绿色变黄

	<style type="text/css">
		div{
			width:100px;
		}

		.green::after{
			content:"";
			width:20px;
			height:20px;
			background-color:green;
			display:inline-block;
		}
		.yellow::after{
			content:"";
			width:20px;
			height:20px;
			background-color:yellow;
			display:inline-block;
		}

	</style>
</head>
<body>
    <div class= "green" style="height:100px; background-color:red;"></div>
	<script type="text/javascript">
		var div = document.getElementsByTagName("div")[0];
		window.getComputedStyle(div,"after");

		div.onclick = function(){
			div.className = "yellow";
		}
	</script>

实现的效果为
在这里插入图片描述

改变样式让它变大这个是最常规最无脑的做法

	<style type="text/css">
		div{
			width:100px;
			height:100px;
			background-color:red;
		}

	

	</style>
</head>
<body>
    <div></div>
	<script type="text/javascript">
		var div = document.getElementsByTagName("div")[0];
		

		div.onclick = function(){
			div.style.width = "200px";
			div.style.height = "200px";
			div.style.backgroundColor = "green";

		}
	</script>

提升效率的方式贼舒服的表达很nice

	<style type="text/css">
		div{
			width:100px;
			height:100px;
			background-color:red;
		}
		.active{
			width:200px;
			height:200px;
			background-color:green;
		}
	

	</style>
</head>
<body>
    <div></div>
	<script type="text/javascript">
		var div = document.getElementsByTagName("div")[0];
		

		div.onclick = function(){
			div.className = "active";

		}
	</script>

实现效果
在这里插入图片描述
点击之后变成这个样子的

实现小方块的运动 parseInt( ) 可以将里面的数字取出来比如里面是10px可以取出10

<!DOCTYPE html>
<html lang="en">
<head>
	<title>修炼之路</title>
	<meta charset="utf-8">
	<style type="text/css">
	</style>
</head>
<body>
    <div style="width:100px;height:100px;background-color:red;position:absolute;left:0;top:0;"></div>
	<script type="text/javascript">
		function getStyle(elem, prop) {
			if(window.getComputedStyle){
				return window.getComputedStyle(elem, prop)[prop];
			}else{
				return elem.currentStyle[prop];
			}
		}

		var div = document.getElementsByTagName("div")[0];
		setInterval(function () {
			div.style.left = parseInt(getStyle(div,"left")) + 10 + "px";
		},100)
	</script>


</body>
</html>

实现效果小方块向右不断移动

设一个停止的条件
在这里插入图片描述

小白追梦

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
获取窗口属性获取dom尺寸脚本化CSS(下) 有源码可以随意进行练习哈太棒了一起加油一起成长

1、写东西刺激大脑的记忆能力尽量不要用纸写电子化防止丢了脚本化CSS读写 css div.style.width（也是写的唯一操作）可读写行间样式无兼容性问题碰到float这样的保留字属性前面加上css注意 background - color 需要写成小驼峰方式 div.style.backgroundColor写入的值一定为字符串格式2、比较特殊在上面写width 下面不写这个会加到这个地方
复制链接

扫一扫