js动态改变样式属性(style属性)

Posted 亲亲的我来了

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js动态改变样式属性(style属性)相关的知识,希望对你有一定的参考价值。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Style</title>
    <!--
      之前接触的 行内样式 style 是css设置样式
      现在我们使用的是js中的设置样式!
    -->
    <style type="text/css">
        #myDiv{
            height: 50px;
            width: 50px;
        }
    </style>




</head>
<body>

  <div  id="myDiv" style="border: 1px solid red"></div>

  <button type="button" onclick="changeBackground();">换背景色</button>
  <button type="button" onclick="changeMargin();">换外边距</button>


<script type="text/javascript">
     var div=document.getElementById("myDiv");
     /**
      *  通过js中的style属性来设置样式
      *
      *  注意点:
      *  01.css中有的属性我们 style中都有
      *  02.只不过属性名写法不一致
      *     比如说  css font-size       style fontSize
      */
     function changeBackground(){
         div.style.backgroundColor="pink";  //改变背景颜色
     }
     function changeMargin(){
         div.style.marginLeft="50px";  //改变外边距
     }
</script>

</body>
</html>

 

以上是关于js动态改变样式属性(style属性)的主要内容,如果未能解决你的问题,请参考以下文章

js动态改变样式属性(className属性)

js 改变style

前端学习笔记—使用JS修改样式

小程序 js可以动态设置css样式属性

如何用js实现,点击后,改变一个css

跪求JS动态改变层的style.left属性使其水平移动的例子