js開發之動態修改網頁元素樣式
Apr 27, 2019 pm 03:51 PM
html
js
本篇文章中主要講述的是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中文網其他相關文章！
本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
熱門文章
R.E.P.O.能量晶體解釋及其做什麼（黃色晶體）
2 週前
By 尊渡假赌尊渡假赌尊渡假赌
倉庫：如何復興隊友
4 週前
By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險：如何獲得巨型種子
3 週前
By 尊渡假赌尊渡假赌尊渡假赌
擊敗分裂小說需要多長時間？
3 週前
By DDD
R.E.P.O.保存文件位置：在哪里以及如何保護它？
3 週前
By DDD
熱門文章
R.E.P.O.能量晶體解釋及其做什麼（黃色晶體）
2 週前
By 尊渡假赌尊渡假赌尊渡假赌
倉庫：如何復興隊友
4 週前
By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險：如何獲得巨型種子
3 週前
By 尊渡假赌尊渡假赌尊渡假赌
擊敗分裂小說需要多長時間？
3 週前
By DDD
R.E.P.O.保存文件位置：在哪里以及如何保護它？
3 週前
By DDD
熱門文章標籤
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
