<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="wrap" style="width: 100px;">123</div>
<script>

    /*
    * 合法标签属性
    *   style 这个属性非常特殊
    *   一个节点对象style属性是存储着这个节点所有！！！内联/行内样式！！！的对象
    */
    let oWrap = document.getElementById('wrap');

    // 对于字符串是可以直接点操作直接加进去的
    oWrap.innerHTML += '456'; // >>123456

    // 这里的style属性是css样式表
    console.log( oWrap.style ); //>>CSSStyleDeclaration

    console.log(typeof oWrap.style); //>>object

    //所以这里的+=操作不能实现
    // oWrap.style += 'height:100px;background-color:pink'; //不能给对象直接添加字符串

    //他是一个object所以想要使用对象中的属性，直接点属性
    oWrap.style.height = '100px';
    //驼峰命名 把-号改为后一个字母大写
    oWrap.style.backgroundColor = 'red';
</script>
</body>
</html>