<!--
操作节点样式
dom.style.样式名 = 样式值
获取行间样式
dom.style.样式名
获取非行间样式值
var 样式值 = window.getComputedStyle(节点).样式名
=> 非IE浏览器
var 样式值 = dom.currentStyle.样式名
=> IE浏览器
-->
<style>
.c1{
height: 300px;
width: 400px;
}
</style>
</head>
<body>
<!-- <div style="width:200px;">元素一</div> -->
<div class="c1"></div>
<script>
function testClassStyle(){
// var divEle = document.querySelector('div')
// // console.log('divEle.style.width :', divEle.style.height);
// console.log( window.getComputedStyle(divEle).height );
// console.log( window.getComputedStyle(divEle).width );
var div = document.querySelector('div')
console.log(window.getComputedStyle(div).width)
console.log(window.getComputedStyle(div).height)
console.log(div.currentstyle.width)
console.log(div.currentstyle.height)
}
testClassStyle()
function testSetStyle() {
var divEle = document.querySelector('div')
divEle.style.height = '100px'
}
//获取行间样式
function testGetStyle() {
var divEle = document.querySelector('div')
console.log('divEle.style.width :', divEle.style.width);
}
// testGetStyle()