JS 中操作 css

元素对象可以通过style 获取所有样式集合对象, 可以继续打点调用属性名得到元素的行内样式, 而不是计算后的样式

<div class="box" id="box" data-ming="zidinyi" style="width:300px;height:300px;">盒子</div>
<script>
//获取元素
var oBox = document.getElementById("box");
//通过点语法获取样式集合对象
console.log(oBox.style);//返回所有样式
//只能读取行内样式  , 不能读取计算后的样式
console.log(oBox.style.width);//返回宽
console.log(typeof oBox.style.width);//返回  string
//设置= , 添加在行内,右侧属性值 , 写法和css属性值是一样的
oBox.style.width ="400px";
oBox.style.color = "#fff"
//单一背景颜色需要改名 改为驼峰命名法
oBox.style.backgroundColor="red";

设置行内样式

var box1 = document.getElementsByTagName("div")[0];
console.log(box1.style.backgroundColor);
console.log(box1.style.border); //没有打印结果，因为这个属性不是行内样式
console.log(typeof box1.style); //因为是对象，所以打印结果是Object
console.log(box1.style); //打印结果是对象
var box2 = $("#ifjieban2")[0];
var box3 = $("#ifjieban3")[0];
console.log("2没有打印结果",box2.style.border); //没有打印结果，因为这个属性不是行内样式
console.log("2因为是对象",typeof box2.style); //因为是对象，所以打印结果是Object
console.log("2打印结果是对象",box2.style); //打印结果是对象