<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title> 用js直接修改样式 </title>
style属性用来修改样式
原来CSS属性名怎么写，style后面就怎么加
例：width和height
style.width和style.height
例外：css里background-color
但是JS里因为不支持变量名有-，所以会改成 backgroundColor
只要是css里带-的，都会把-去掉，再把-后面的首字母大写
除了例外，其他的css怎么写，js就怎么写
<style>
.box {
width: 200px;
height: 200px;
background-color: rgb(255, 71, 230);
}
</style>
</head>
<body>
<input type="button" value="修改样式" id="gai">
<div class="box"></div>
<script>
// 找到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";
}
</script>
</body>
</html>
网友评论