jquery怎麼改變style樣式
- 青灯夜游原創
- 2023-01-28 16:19:1410714瀏覽
jquery改變style樣式的方法：1.利用css()為指定元素設定新style樣式即可，語法「$(selector).css({"屬性名稱1":"屬性值1" ,"屬性名稱2":"屬性值2",...})」；2、使用attr()設定指定元素的style屬性值即可，語法「$(selector).attr("style","屬性名1:屬性值1;屬性名2:屬性值3;...")」。
本教學操作環境：windows7系統、jquery3.6版本、Dell G3電腦。
jquery改變style樣式有兩種方法：
#透過css()方法修改
透過attr()方法來修改
方法1：使用css()方法
css() 方法可以設定相符的元素的一個或多個樣式屬性。
直接利用css() 方法設定新style樣式即可
語法：
$(selector).css({"属性名1":"属性值1","属性名2":"属性值2",...})範例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="js/jquery-3.6.3.min.js"></script>
<script>
$(document).ready(function() {
$("button").on("click", function() {
$("div").css({"color":"red","background-color":"papayawhip","font-size":"25px"});
});
});
</script>
<style>
.tr1 {
color: green;
}
.tr2 {
color: red;
background-color: blanchedalmond;
}
</style>
</head>
<body class="ancestors">
<div style="color: yellow;background-color:powderblue;">欢迎来到PHP中文网！</div><br>
<button>改变div元素的style样式</button>
</body>
</html>
方法2：使用attr()方法
attr() 方法設定或傳回被選元素的屬性值。
只需要使用attr() 方法設定元素的style屬性值即可。
語法：
$(selector).attr("style","属性名1:属性值1;属性名2:属性值3;...")範例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="js/jquery-3.6.3.min.js"></script>
<script>
$(document).ready(function() {
$("button").on("click", function() {
$("div").attr("style", "color:pink;background-color:peru;font-size: 18px;");
});
});
</script>
<style>
.tr1 {
color: green;
}
.tr2 {
color: red;
background-color: blanchedalmond;
}
</style>
</head>
<body class="ancestors">
<div style="color: red;background-color:papayawhip;">欢迎来到PHP中文网！</div><br>
<button>改变div元素的style样式</button>
</body>
</html>
#【推薦學習：jQuery影片教學、 web前端影片】
以上是jquery怎麼改變style樣式的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
上一篇：node怎麼實現語音聊天下一篇：node怎麼實現語音聊天