本篇文章中主要講述的是JS修改網頁元素樣式的程式碼範例，具有一定參考價值，有興趣的朋友可以了解一下，也希望你看後有所幫助。
在前端開發中，有時候需要動態修改的網頁元素的樣式，這裡會使用JS動態修改元素樣式的方法做個小結。
網頁結構：
#按鈕：
## 標籤：input 類型：button id：btn value：點我##p:
##p:##標籤：p id：box
使用JS修改網頁元素樣式有兩種方式：
1.使用ClassName
2.使用Style物件
程式碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>DOM操作元素的样式</title>
<style type="text/css">
.box{
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<input type="button" id="btn" value="点 我" />
<div id="box"></div>
<!-- 添加JS代码 -->
<script type="text/javascript">
//定义函数my$-根据元素id获得页面元素,目的是为了提高效率
function my$(id){
return document.getElementById(id);
}
// 方法1.根据ClassName修改元素的样式
// var btn=my$('btn');
// btn.onclick=function(){
// my$('box').className='box';
// }
//方法2.根据Style对象修改元素的样式
var btn=my$('btn');
btn.onclick=function(){
var box=my$('box');
box.style.width="100px";
box.style.height="100px";
box.style.backgroundColor="red";
}
</script>
</body>
</html>相關教學：
HTML影片教學1.操作樣式的時候，使用範例樣式ClassName還是使用Style對象？ ？
當設定多個樣式屬性的時候使用類別樣式方便
當設定樣式屬性比較少的時候，使用Style物件比較方便
#2.在使用Style對象的時候，遇見寬、高屬性，必須加px單位
3.Style物件屬性樣式的值是字串
結果圖如圖：
相關教學：
以上是js開發之動態修改網頁元素樣式的詳細內容。更多資訊請關注PHP中文網其他相關文章！
