Maison > Article > interface Web > Comment modifier des éléments en javascript
Comment modifier des éléments en javascript
- 青灯夜游original
- 2021-06-18 17:18:514855parcourir
Méthode : 1. Utilisez l'instruction "element.innerText='value'" ou "element.innerHTML='value'" pour modifier le contenu de l'élément ; 2. Utilisez l'instruction "element.style" ou "element ; Instruction .className" Modifier les propriétés de style d'élément.
L'environnement d'exploitation de ce tutoriel : système Windows 7, JavaScript version 1.8.5, ordinateur Dell G3.
Exploiter et modifier des éléments
L'opération DOM de JavaScript peut modifier le contenu, la structure et le style de la page Web. Nous pouvons utiliser les éléments d'opération DOM pour modifier le contenu, les attributs, etc. à l'intérieur de l'élément.
modifie le contenu de l'élément
element.innerText de la position de départ à la position de fin, mais il supprime le code HTML balise, Dans le même temps, les espaces et les sauts de ligne seront également supprimés de l'ensemble du contenu de la position de départ à la position de fin de
element.innerHTML, y compris les balises html, tout en conservant les espaces et les sauts de ligne.
innerText ne reconnaît pas les balises HTML, innerHTML reconnaît les balises HTML. Ces deux propriétés sont lisibles et inscriptibles.
<body>
<button>
显示系统当前时间
</button>
<div>
某个时间
</div>
<script>
var btn = document.querySelector('button');
var div = document.querySelector('div');
btn.onclick = function(){
div.innerText = getDate();
}
function getDate(){
var date = new Date();
var year = date.getFullYear();
var month = date.getMonth()+1;
var dates = date.getDate();
var arr = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
var day = date.getDay();
return '今天是'+year+'年'+month+'月'+dates+'日'+arr[day];
}
</script>
</body>
Après l'exécution, une certaine heure sera affichée. Lorsque vous cliquez pour afficher l'heure actuelle du système, la date et la semaine actuelles seront affichées.
Modifier les attributs de style
element.style modifie l'opération en ligne, element.className modifie la classe name Attribut de style
<head>
<style>
div {
width:200px;
height:200px;
background-color:pink;
}
</style>
</head>
<body>
<div>
</div>
<script>
var div = document.quertSelector('div');
div.onclick = function(){
this.style.backgroundColor = 'purple';
this.style.width='300px';
}
</script>
</body>Une fois le programme exécuté, une boîte rose d'une largeur et d'une hauteur de 200 pixels apparaîtra. Cliquez sur la boîte pour la transformer en une boîte violette d'une largeur de 300 pixels et d'une hauteur de 300 pixels. 200 pixels. JS modifie l'opération de style et produit des styles en ligne.
Utilisez className pour modifier les attributs de style
<head>
<style>
div {
width:100px;
height:100px;
background-color:pink;
}
.change {
width:200px;
height:200px;
background-color:purple;
}
</style>
</head>
<body>
<div>
文本
</div>
<script>
vet test =document.querySelector('div');
test.onclick = function(){
//将当前元素的类名改为change
this.className = 'change';
}
</script>
</body>[Recommandations associées : Tutoriel d'apprentissage Javascript]
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!