当前位置: 首页 > 工具软件 > Java-Style > 使用案例 >

js style属性

贺高飞
2023-12-01
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .box {
            border: 10px solid #000;
        }
    </style>
</head>
<body>

<div class="box" style="width: 100px;height: 100px;background-color: pink;">我爱你中国</div>

<script>
    
    var box = document.getElementsByTagName("div")[0];


    // 1.样式少的时候使用
    console.log(box.style.backgroundColor);

    // 2.style是对象
    console.log(box.style);
    console.log(typeof box.style);

    // 3.值是字符串,没有设置值是“”;
    console.log(box.style.lineHeight);
    console.log(box.style.border);

    // 4.命名规则,驼峰命名。和css不一样
    console.log(box.style.backgroundColor);

    // 5.设置了类样式不能获取。(只和行内式交互,和内嵌和外链无关)
    console.log(typeof box.className);

    // 6.box.style.cssText = “字符串形式的样式”;
    console.log(box.style.cssText);
    box.style.cssText = "width: 200px; height: 200px; background-color: red;line-height:200px;text-align:center;"


</script>
</body>
</html>


 类似资料: