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>