js动态改变样式属性（style属性）<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Style</title>
<!--
之前接触的⾏内样式 style 是css设置样式
现在我们使⽤的是js中的设置样式！
-->
<style type="text/css">
#myDiv{
div border属性
height: 50px;
width: 50px;
}
</style>
</head>
<body>
<div  id="myDiv" ></div>
<button type="button" onclick="changeBackground();">换背景⾊</button>
<button type="button" onclick="changeMargin();">换外边距</button>
<script type="text/javascript">
var ElementById("myDiv");
/
**
*  通过js中的style属性来设置样式
*
*  注意点：
*  01.css中有的属性我们 style中都有
*  02.只不过属性名写法不⼀致
*    ⽐如说  css font-size      style fontSize
*/
function changeBackground(){
div.style.backgroundColor="pink";  //改变背景颜⾊
}
function changeMargin(){
div.style.marginLeft="50px";  //改变外边距
}
</script>
</body>
</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。