JS设置样式的两种方式

a) ClassName/style------DOM的style属性只能获取标签中使用style设置的样式,无法获取潜入或者外部样式,style.cssText获取style里面的字符串(只能在行内式获取)
b) 样式少的时候使用
c) Style是对象类型
d) 值是字符串,没有设置值是“”
e) 命名以驼峰命名
f) 改变透明度div.style.opacity=“0.2”;
div.style.filter=“alpha(opacity=20)”

1.Style属性演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            border:1px solid #000000;
        }
    </style>
</head>
<body>
<div class="box" style="width: 100px;height: 100px;background-color: pink">我爱你祖国</div>
<script>
    var box=document.getElementsByTagName("div")[0];
    console.log(box.style.width);
    console.log(box.style.border);
    console.log(box.style);
    console.log(typeof box.style);.
    console.log(typeof box.className);
    console.log(box.style.cssText);
</script>
</body>
</html>

2.改变盒子的大小和透明度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div style="width: 100px;height: 100px;background-color: pink;"></div>
<script>
    var div=document.getElementsByTagName("div")[0];
    div.function () {
        div.style.width="200px";
        div.style.height="200px";
        div.style.backgroundColor="blue";
        div.style.opacity="0.2";
        div.style.filter="alpha(opacity=20)";
    }
</script>
</body>
</html>

猜你喜欢

转载自blog.csdn.net/zuo_zuo_blog/article/details/89074609