学无先后,达者为师

网站首页 前端文档 正文

Javascript 动态样式控制方法_javascript技巧

作者:稻田里展望者   更新时间: 2022-05-06 前端文档

方法一:使用style属性来设置

使用style属性来设置

html代码:

    
        div    

Javascript代码:

var div1 = document.getElementById("div1");
        div1.onclick = function () {
            //修改样式
            div1.style.border = "1px solid red";

            div1.style.width = "200 px";

            div1.style.fontSize = "200px";
        }

方法二:定义好类选择器的样式

定义好类选择器的样式,通过元素的ClassName属性来设置其Class属性值,用的比较多

html代码:

   
        div2    

Css代码: 

  

javascript代码:

var div2 = document.getElementById("div2");
        div2.onclick = function () {
            div2.className = "d1";
        }

原文链接:https://blog.csdn.net/weixin_46441425/article/details/123165945

栏目分类
最近更新