Maison >interface Web >js tutoriel >développement js pour modifier dynamiquement les styles d'éléments de page Web
développement js pour modifier dynamiquement les styles d'éléments de page Web
- little bottleavant
- 2019-04-27 15:51:233013parcourir
Cet article parle principalement d'exemples de code pour modifier les styles d'éléments de page Web avec JS. Il a une certaine valeur de référence. Les amis intéressés pourront en apprendre davantage après l'avoir lu.
Dans le développement front-end, les styles des éléments de page Web doivent parfois être modifiés dynamiquement. Voici un résumé de la méthode de modification dynamique des styles d'éléments à l'aide de JS.
Structure de la page Web :
Bouton :
Balise : entrée Type : identifiant du bouton : valeur btn : cliquez sur moi
p :
Balise : p id : box
Il existe deux façons d'utiliser JS pour modifier le style des éléments de la page Web :
1 Utiliser ClassName
2.
Le code est le suivant :
<!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>Tutoriels associés : Tutoriel vidéo HTML
Remarque :
1. , utilisez l'exemple de style ClassName ou Style Object? ?
Lors de la définition de plusieurs attributs de style, il est pratique d'utiliser des styles de classe
Lorsque vous définissez moins d'attributs de style, il est plus pratique d'utiliser des objets Style
2. Lors de l'utilisation de Style objets Lorsque vous rencontrez les attributs de largeur et de hauteur, vous devez ajouter l'unité px
3. La valeur du style de l'attribut d'objet Style est une chaîne
Le résultat est tel qu'indiqué dans la figure :
Tutoriels associés : Tutoriel vidéo js
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!