<!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>
属性演示
网友评论