JS与CSS交互

最新推荐文章于 2023-12-06 11:09:52 发布

mango_glass

最新推荐文章于 2023-12-06 11:09:52 发布

阅读量144

点赞数

分类专栏： JS

本文链接：https://blog.csdn.net/mango_glass/article/details/116232599

版权

JS 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

JS与CSS交互

style属性
通过元素的style属性可以获取或修改元素的CSS样式
例：document.body.style.backgroundColor='red'
原css样式为短横线命名法，在使用style属性石需要转换成小驼峰命名法
比如，在css中，设置字体大小为font-size，在使用style属性时，需转换为fontSize

隐藏元素
在这里插入图片描述

<body>
	<p id="text">这是一段文本</p>
	<input type="button" name="" id="" value="显示" onclick="show()" />
	<input type="button" name="" id="" value="隐藏" onclick="hdn()" />
	<script type="text/javascript">
		function show(){
			document.getElementById("text").style.visibility="visible";
			//document.getElementById("text").style.display="block";
		}
		function hdn(){
			document.getElementById("text").style.visibility="hidden";
			//document.getElementById("text").style.display="none";
		}
	</script>
</body>

用visibility设置的效果如下：
在这里插入图片描述

用display设置的效果如下：
在这里插入图片描述

修改className来更改样式
通过修改元素的所属类对不同的类设置相应的样式
在这里插入图片描述

mango_glass

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JS与CSS交互

JS与CSS交互style属性通过元素的style属性可以获取或修改元素的CSS样式例：document.body.style.backgroundColor='red'原css样式为短横线命名法，在使用style属性石需要转换成小驼峰命名法比如，在css中，设置字体大小为font-size，在使用style属性时，需转换为fontSize隐藏元素<body> <p id="text">这是一段文本</p> <input type="button
复制链接

扫一扫