Js中的DOM改变HTML标签中的CSS样式

最新推荐文章于 2024-07-18 16:12:32 发布

qq_44388958

最新推荐文章于 2024-07-18 16:12:32 发布

阅读量915

点赞数 1

本文链接：https://blog.csdn.net/qq_44388958/article/details/88855019

版权

JavaScript中的DOM可以改变CSS样式。

下面来看一下代码 :

效果如下 :

如何用JavaScript中的DOM改变HTML标签中的CSS样式，script代码如下：

代码解释如下 :

var inObj = document.getElementById("btn");  //通过id名称“btn”来获取元素,声明一个变量inObj来储存这个元素
inObj.onclick = function () {    //创建这个元素的点击事件
    var divObj = document.getElementById("div");   //通过id名称“div”来获取元素,声明一个变量divObj来储存这个元素
    divObj.style.width = "300px";   //设置这个元素的宽为300px
    divObj.style.height = "300px";  //设置这个元素的高为300px
    divObj.style.backgroundColor = "grey";  //设置这个元素的背景颜色为灰色
}

效果如下 :