[网页编程]-18 JavaScript Document节点对象的样式操作

prtyaa 2023-12-27 16:01:53  51795

分类专栏：资讯

本篇主要讲的是对元素节点中的CSS样式的属性的操作,一共有两种,第一种常规的,用的比较多一些,第二种根据实际情况而定

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        function demo1() {
            //方式一 根据id获取节点对象
            var div = document.getElementById("div1")
                //获取节点CSS样式 只支持行内式的CSS
            var wi = div.style.width;
            var hi = div.style.height;
            //输出
            // alert(wi + "" + hi)
			//操作元素的CSS样式 对于background-color有-的命名的,我们需要使用驼峰命名
			div.style.width="500px";
			div.style.height="600px";
			
			//方式2通过获取className的方式增加类来对CSS样式进行操作
			div.className="div2";
        }
    </script>
	<style>
		.div2{
			border: 2px solid crimson;
		}
	</style>

</head>

<body onload="demo1()">

    <div id="div1" style="width: 200px; height: 200px; background-color: aqua;"></div>

</body>

</html>

网站声明：如果转载，请联系本站管理员。否则一切后果自行承担。

本文链接：https://www.xckfsq.com/news/show.html?id=31532

赞同 0

评论 0 条

[网页编程]-18 JavaScript Document节点对象的样式操作

相关文章

关注我们