html js修改样式,用js直接修改样式

用js直接修改样式

style属性用来修改样式

原来CSS属性名怎么写，style后面就怎么加

例：width和height

style.width和style.height

例外：css里background-color

但是JS里因为不支持变量名有-，所以会改成 backgroundColor

只要是css里带-的，都会把-去掉，再把-后面的首字母大写

除了例外，其他的css怎么写，js就怎么写

.box {

width: 200px;

height: 200px;

background-color: rgb(255, 71, 230);

}

// 找到div

var box = document.getElementsByClassName('box')[0];

// 找到按钮，添加点击事件

document.getElementById('gai').onclick = function () {

box.style.width = "500px";

box.style.height = "500px";

// css中的 - 后面的单词首字母换大写

box.style.backgroundColor = "red";

box.style.opacity = 0.5;

box.style.marginTop = "10px";

}