溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下js開發之動態修改網頁元素樣式的方法，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！
在前端開發中，有時候需要動態修改的網頁元素的樣式，這里將使用JS動態修改元素樣式的方法做個小結。
網頁結構：
按鈕：
標簽：input 類型：button id：btn value：點我
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開發之動態修改網頁元素樣式的方法有了一定的了解，想了解更多相關知識，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
