September 2
Hai creato la pagina web perfetta piena di pulsanti utili, controlli utente e testo colorato. Ora si desidera centrare alcuni degli oggetti della pagina in tempo reale. CSS e JavaScript rendono questo possibile. Gli sviluppatori Web utilizzano Cascading Style Sheets (CSS) per definire l'aspetto di un elemento della pagina. Essi utilizzano JavaScript per interagire con una pagina in risposta ad eventi utente e a livello di sistema. Combinare CSS e JavaScript per centrare dinamicamente ogni elemento della pagina web utilizzando poche righe di codice JavaScript.
1 Creare una nuova pagina HTML e aggiungere il seguente codice alla sezione <style>:
.container {background-color: #eeeeee; border: 1px solid #FFFFFF; width: 50%;}
.contents {background-color: red; sfondo: #eee;}
.textBox (text-slign: left;}
Questo crea una classe contenitore, contenuti e TextBox gli elementi HTML utilizzeranno per lo styling.
2 Aggiungere queste funzioni JavaScript alla sezione <script>:
Funzione centerContainer () {
var myObject = document.getElementById('container')
ANDARE
myObject.style.margin = 'auto'
ANDARE
}
Funzione CenterText () {
var myObject = document.getElementById ( 'myText')
ANDARE
myObject.style.textAlign = 'center'
ANDARE
}
La prima funzione centra il contenitore modificando le proprietà CSS a destra ea sinistra di margine a \ "auto. \" Questo è come gli sviluppatori di solito centrare un elemento HTML. La seconda funzione cambia proprietà text-align CSS della casella di testo a \ "center. \"
3 Aggiungere questo blocco di codice alla sezione <body>:
<Div id = \ "contenitore \" class = \ "contenitore \">
<div id=\"contents\" class=\"contents\">
<input id=\"myText\" type=\"text\" value=\"Sample Text\" /><p>
<input id=\"centerBox\" type=\"button\" value=\"Center Container\" onclick=\"centerContainer()\" /> <input id=\"centerText\" type=\"button\" value=\"Center Text\" onclick=\"centerText()\" />
</div>
Questo crea un contenitore padre di nome \ un contenitore bambino di nome \ "contenitore \" e "contenuti. \" All'interno del contenitore contenuti sono due pulsanti e una casella di testo. I due contenitori e la casella di testo sono arredate con i nomi di classe create nella sezione <style>. Si noti che il testo nella casella di testo è allineato a sinistra.
4 Aggiungere queste funzioni JavaScript alla sezione <script>:
Funzione centerContainer () {
var myObject = document.getElementById('container')
ANDARE
myObject.style.margin = 'auto'
ANDARE
}
Funzione CenterText () {
var myObject = document.getElementById ( 'myText')
ANDARE
myObject.style.textAlign = 'center'
ANDARE
}
La prima funzione centra l'elemento contenitore, mentre la seconda funzione centra il testo all'interno della casella di testo.
5 Salvare il file HTML e aprirlo in un browser. Si vedrà il contenitore e tutto ciò che sul bordo sinistro della finestra del browser.
6 Fare doppio clic su \ "Centro Container. \" Il contenitore stesso centrerà al centro della finestra del browser. Fare doppio clic su \ "testo al centro. \" Il testo all'interno della casella di testo si sposta dal bordo sinistro della casella di testo al centro della casella di testo.