Heim >Web-Frontend >js-Tutorial >js-Entwicklung zur dynamischen Änderung von Webseitenelementstilen
js-Entwicklung zur dynamischen Änderung von Webseitenelementstilen
- little bottlenach vorne
- 2019-04-27 15:51:233011Durchsuche
In diesem Artikel geht es hauptsächlich um Codebeispiele zum Ändern von Webseitenelementstilen. Interessierte Freunde können nach der Lektüre davon erfahren.
In der Front-End-Entwicklung müssen manchmal die Stile von Webseitenelementen dynamisch geändert werden. Hier finden Sie eine Zusammenfassung der Methode zur dynamischen Änderung von Elementstilen mithilfe von JS.
Webseitenstruktur:
Schaltfläche:
Tag: Eingabetyp: Schaltflächen-ID: BTN-Wert: Klicken Sie auf mich
p:
Tag: p id: box
Es gibt zwei Möglichkeiten, JS zum Ändern des Stils von Webseitenelementen zu verwenden:
1. Verwenden Sie ClassName
2
Der Code lautet wie folgt:
<!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>Verwandte Tutorials: HTML-Video-Tutorial
Hinweis:
1 , verwenden Sie den Beispielstil ClassName oder Style Object? ?
Beim Festlegen mehrerer Stilattribute ist es praktischer, Klassenstile zu verwenden.
Beim Festlegen weniger Stilattribute ist es bequemer, Stilobjekte zu verwenden.
2. Bei Verwendung von Stil Objekte Wenn Sie auf die Attribute width und height stoßen, müssen Sie die px-Einheit hinzufügen
3. Der Wert des Style-Objektattributs style ist eine Zeichenfolge
Das Ergebnis ist wie in der Abbildung dargestellt:
Verwandte Tutorials: JS-Video-Tutorial
Das obige ist der detaillierte Inhalt vonjs-Entwicklung zur dynamischen Änderung von Webseitenelementstilen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!