JavaScript给HTML元素设置CSS样式,动态设置样式

以下是JavaScript设置CSS样式,如果JS动态设置CSS样式可以设置CSS样式封装在一个方法里面,调用即可以设置样式
方法一
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <meta charset="utf-8" />
</head>
<body>
    <div id="box1"></div>
</body>
</html>
<script type="text/javascript">
    document.getElementById('box1').style.width = '200px';
    document.getElementById('box1').style.height = '200px';
    document.getElementById('box1').style.background = 'blue';
</script>
方法二(一般建议选择方法二,代码执行效率更高)
转载请保留 http://www.luofenming.com/show.aspx?id=ART2019082200001
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <meta charset="utf-8" />
</head>
<style type="text/css">
    .myClass {
        width: 200px;
        height: 200px;
        background: blue;
    }
</style>
<body>
    <div id="box1"></div>
</body>
<script type="text/javascript">
    var box = document.getElementById('box1');
    box.className = 'myClass';
</script>
</html>

评论

  1. 117.136.75.*2019-10-04 19:42
    p